/* CSS Document */
.image-swiper textarea, .image-swiper input {
font: normal normal 0.28rem/1.5 Microsoft YaHei,tahoma,arial,Hiragino Sans GB,\\5b8b\4f53,sans-serif; }
.image-swiper img {
display: block; }
.image-swiper .clear:after {
content: "";
display: block;
clear: both; }
.image-swiper body, .image-swiper p, .image-swiper ol, .image-swiper ul, .image-swiper h1, .image-swiper h2, .image-swiper h3, .image-swiper h4, .image-swiper h5, .image-swiper h6 {
margin: 0;
padding: 0;
list-style: none;
/*font:normal normal 0.28rem/1.5 Microsoft YaHei,tahoma,arial,Hiragino Sans GB,\\5b8b\4f53,sans-serif;*/ }
.image-swiper button {
font: normal normal 0.28rem/1.5 Microsoft YaHei,tahoma,arial,Hiragino Sans GB,\\5b8b\4f53,sans-serif; }
.image-swiper a {
color: inherit;
text-decoration: none; }
.image-swiper .nowrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.image-swiper .fl {
float: left; }
.image-swiper .fr {
float: right; }
.image-swiper .i100 {
overflow: hidden; }
.image-swiper .i100 > img {
width: 100%; }
.image-swiper a > img {
width: 100%; }
.image-swiper .to1 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.image-swiper .a1 {
position: relative; }
.image-swiper .a1 > a {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: block; }
@media only screen and (min-width: 1700px) {
.image-swiper .z-hd-bu1 {
width: 100%;
height: 84px; }
.image-swiper .z-hd-d1 {
width: 100%;
height: 84px;
background: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 200;
overflow: hidden;
box-shadow: 0 0 10px rgba(213, 25, 32, 0.2); }
.image-swiper .z-hd-i1 {
width: 229px;
position: absolute;
top: calc(50% - 33px);
left: 1.5625%; }
.image-swiper .z-hd-p1 {
font-size: 16px;
line-height: 28px;
color: #454545;
position: absolute;
top: calc(50% - 28px);
left: calc(229px + 2.8125%); }
.image-swiper .z-hd-d2 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 27.3958%; }
.image-swiper .z-hd-d3 {
height: 100%;
position: relative;
float: left;
padding-top: calc(42px - 8px);
box-sizing: border-box; }
.image-swiper .z-hd-d4 {
height: 16px;
padding: 0 15px;
border-right: 1px solid #cccccc;
box-sizing: border-box; }
.image-swiper .z-hd-d3:last-child .z-hd-d4 {
border: 0; }
.image-swiper .z-hd-p2 {
padding: 0 4px;
position: relative;
font-size: 15px;
line-height: 16px;
color: #333333;
transition: 0.5s;
height: calc((84px + 16px) / 2); }
.image-swiper .z-hd-l1 {
width: 0;
height: 4px;
background: #b90c12;
position: absolute;
bottom: 0;
left: 50%;
transition: 0.5s; }
.image-swiper .z-hd-p2:hover {
color: #b90c12;
transition: 0.5s; }
.image-swiper .z-hd-p2:hover .z-hd-l1 {
width: 100%;
left: 0;
transition: 0.5s; }
.image-swiper .z-hd-d3on .z-hd-p2 {
color: #b90c12;
transition: 0.5s; }
.image-swiper .z-hd-d3on .z-hd-p2 .z-hd-l1 {
width: 100%;
left: 0;
transition: 0.5s; }
.image-swiper .z-hd-d5 {
position: absolute;
top: calc(42px - 13px);
right: 5.5521%; }
.image-swiper .z-hd-i2 {
width: 26px;
float: left;
margin-right: 16px; }
.image-swiper .z-hd-p3 {
font-size: 28px;
line-height: 25px;
color: #d51920;
font-family: "din";
float: left; }
.image-swiper .z-hd-bt1 {
width: 80px;
height: 100%;
background: none;
position: absolute;
top: 0;
right: 0;
cursor: pointer; }
.image-swiper .z-hd-bt1 > b {
display: block;
background: #b90c12;
position: absolute;
left: 27px;
height: 3px;
border: 0;
border-radius: 2px;
transition: 0.5s; }
.image-swiper .z-hd-bt1 > b:nth-child(1) {
width: 32px;
top: 30px; }
.image-swiper .z-hd-bt1 > b:nth-child(2) {
width: 24px;
top: 41px; }
.image-swiper .z-hd-bt1 > b:nth-child(3) {
width: 32px;
top: 52px; }
.image-swiper .z-hd-bt1on > b:nth-child(1) {
top: 41px;
transform: rotate(405deg);
transition: 0.5s; }
.image-swiper .z-hd-bt1on > b:nth-child(2) {
width: 0;
transition: 0.5s; }
.image-swiper .z-hd-bt1on > b:nth-child(3) {
top: 41px;
transform: rotate(-405deg);
transition: 0.5s; }
.image-swiper .z-menu1-d1 {
display: none; }
.image-swiper .z-menu2-d1 {
width: 100%;
height: 81.5217%;
display: none;
background: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 190; }
.image-swiper .z-menu2-d2 {
position: absolute;
top: calc(50% - (66px * 4));
left: 20.3958%; }
.image-swiper .z-menu2-d3 {
position: relative; }
.image-swiper .z-menu2-d3 > div {
font-size: 24px;
line-height: 66px;
color: #333333;
transition: 0.5s; }
.image-swiper .z-menu2-d3:hover > div {
color: #c2322c;
transition: 0.5s; }
.image-swiper .z-menu2-d3 > b:nth-child(2) {
width: 0;
height: 1px;
background: #c2322c;
transition: 0.5s;
position: absolute;
top: 50%;
right: calc(100% + 20px); }
.image-swiper .z-menu2-d3:hover > b:nth-child(2) {
width: 34px;
transition: 0.5s; }
.image-swiper .z-menu2-d3 > b:nth-child(3) {
width: 0;
height: 1px;
background: #c2322c;
transition: 0.5s;
position: absolute;
top: 50%;
left: calc(100% + 20px); }
.image-swiper .z-menu2-d3:hover > b:nth-child(3) {
width: 240%;
transition: 0.5s; }
.image-swiper .z-menu2-d4 {
width: 59.375%;
position: absolute;
top: calc(50% - (66px * 2));
left: 38.0208%; }
.image-swiper .z-menu2-d5 {
width: 100%;
position: absolute;
top: 0;
left: 0;
display: none; }
.image-swiper .z-menu2-d6 {
width: 33.3333%;
float: left;
position: relative;
height: 60px; }
.image-swiper .z-menu2-d6 > div {
font-size: 16px;
line-height: 60px;
color: #4e4e4e;
transition: 0.5s;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-menu2-d6:hover > div {
font-weight: bold;
color: #c2322c;
transition: 0.5s; }
.image-swiper .z-menu2-d6 > div > b:nth-child(2) {
width: 0;
height: 1px;
background: #c2322c;
transition: 0.5s;
position: absolute;
top: 50%;
right: calc(100% + 20px); }
.image-swiper .z-menu2-d6 > div:hover > b:nth-child(2) {
width: 34px;
transition: 0.5s; }
.image-swiper .z-menu2-d6 > div > b:nth-child(3) {
width: 0;
height: 1px;
background: #c2322c;
transition: 0.5s;
position: absolute;
top: 50%;
left: calc(100% + 20px); }
.image-swiper .z-menu2-d6 > div:hover > b:nth-child(3) {
width: 300%;
transition: 0.5s; } }
@media only screen and (max-width: 1699px) and (min-width: 1440px) {
.image-swiper .z-hd-bu1 {
width: 100%;
height: 84px; }
.image-swiper .z-hd-d1 {
width: 100%;
height: 84px;
background: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 200;
overflow: hidden;
box-shadow: 0 0 10px rgba(213, 25, 32, 0.2); }
.image-swiper .z-hd-i1 {
width: 200px;
position: absolute;
top: calc(50% - 29px);
left: 1.0625%; }
.image-swiper .z-hd-p1 {
font-size: 14px;
line-height: 24px;
color: #454545;
position: absolute;
top: calc(50% - 24px);
left: calc(200px + 2.0125%); }
.image-swiper .z-hd-d2 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 28.8958%; }
.image-swiper .z-hd-d3 {
height: 100%;
position: relative;
float: left;
padding-top: calc(42px - 7px);
box-sizing: border-box; }
.image-swiper .z-hd-d4 {
height: 14px;
padding: 0 8px;
border-right: 1px solid #cccccc;
box-sizing: border-box; }
.image-swiper .z-hd-d3:last-child .z-hd-d4 {
border: 0; }
.image-swiper .z-hd-p2 {
padding: 0 4px;
position: relative;
font-size: 14px;
line-height: 14px;
color: #333333;
transition: 0.5s;
height: calc((84px + 14px) / 2); }
.image-swiper .z-hd-l1 {
width: 0;
height: 4px;
background: #b90c12;
position: absolute;
bottom: 0;
left: 50%;
transition: 0.5s; }
.image-swiper .z-hd-p2:hover {
color: #b90c12;
transition: 0.5s; }
.image-swiper .z-hd-p2:hover .z-hd-l1 {
width: 100%;
left: 0;
transition: 0.5s; }
.image-swiper .z-hd-d3on .z-hd-p2 {
color: #b90c12;
transition: 0.5s; }
.image-swiper .z-hd-d3on .z-hd-p2 .z-hd-l1 {
width: 100%;
left: 0;
transition: 0.5s; }
.image-swiper .z-hd-d5 {
position: absolute;
top: calc(42px - 13px);
right: 6.0521%; }
.image-swiper .z-hd-i2 {
width: 26px;
float: left;
margin-right: 10px; }
.image-swiper .z-hd-p3 {
font-size: 26px;
line-height: 25px;
color: #d51920;
font-family: "din";
float: left; }
.image-swiper .z-hd-bt1 {
width: 80px;
height: 100%;
background: none;
position: absolute;
top: 0;
right: 0;
cursor: pointer; }
.image-swiper .z-hd-bt1 > b {
display: block;
background: #b90c12;
position: absolute;
left: 27px;
height: 3px;
border: 0;
border-radius: 2px;
transition: 0.5s; }
.image-swiper .z-hd-bt1 > b:nth-child(1) {
width: 32px;
top: 30px; }
.image-swiper .z-hd-bt1 > b:nth-child(2) {
width: 24px;
top: 41px; }
.image-swiper .z-hd-bt1 > b:nth-child(3) {
width: 32px;
top: 52px; }
.image-swiper .z-hd-bt1on > b:nth-child(1) {
top: 41px;
transform: rotate(405deg);
transition: 0.5s; }
.image-swiper .z-hd-bt1on > b:nth-child(2) {
width: 0;
transition: 0.5s; }
.image-swiper .z-hd-bt1on > b:nth-child(3) {
top: 41px;
transform: rotate(-405deg);
transition: 0.5s; }
.image-swiper .z-menu1-d1 {
display: none; }
.image-swiper .z-menu2-d1 {
width: 100%;
height: 81.5217%;
display: none;
background: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 190; }
.image-swiper .z-menu2-d2 {
position: absolute;
top: calc(50% - (66px * 4));
left: 20.3958%; }
.image-swiper .z-menu2-d3 {
position: relative; }
.image-swiper .z-menu2-d3 > div {
font-size: 24px;
line-height: 66px;
color: #333333;
transition: 0.5s; }
.image-swiper .z-menu2-d3:hover > div {
color: #c2322c;
transition: 0.5s; }
.image-swiper .z-menu2-d3 > b:nth-child(2) {
width: 0;
height: 1px;
background: #c2322c;
transition: 0.5s;
position: absolute;
top: 50%;
right: calc(100% + 20px); }
.image-swiper .z-menu2-d3:hover > b:nth-child(2) {
width: 34px;
transition: 0.5s; }
.image-swiper .z-menu2-d3 > b:nth-child(3) {
width: 0;
height: 1px;
background: #c2322c;
transition: 0.5s;
position: absolute;
top: 50%;
left: calc(100% + 20px); }
.image-swiper .z-menu2-d3:hover > b:nth-child(3) {
width: 240%;
transition: 0.5s; }
.image-swiper .z-menu2-d4 {
width: 59.375%;
position: absolute;
top: calc(50% - (66px * 2));
left: 38.0208%; }
.image-swiper .z-menu2-d5 {
width: 100%;
position: absolute;
top: 0;
left: 0;
display: none; }
.image-swiper .z-menu2-d6 {
width: 33.3333%;
float: left;
position: relative;
height: 60px; }
.image-swiper .z-menu2-d6 > div {
font-size: 16px;
line-height: 60px;
color: #4e4e4e;
transition: 0.5s;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-menu2-d6:hover > div {
font-weight: bold;
color: #c2322c;
transition: 0.5s; }
.image-swiper .z-menu2-d6 > div > b:nth-child(2) {
width: 0;
height: 1px;
background: #c2322c;
transition: 0.5s;
position: absolute;
top: 50%;
right: calc(100% + 20px); }
.image-swiper .z-menu2-d6 > div:hover > b:nth-child(2) {
width: 34px;
transition: 0.5s; }
.image-swiper .z-menu2-d6 > div > b:nth-child(3) {
width: 0;
height: 1px;
background: #c2322c;
transition: 0.5s;
position: absolute;
top: 50%;
left: calc(100% + 20px); }
.image-swiper .z-menu2-d6 > div:hover > b:nth-child(3) {
width: 300%;
transition: 0.5s; } }
@media only screen and (max-width: 1439px) and (min-width: 1270px) {
.image-swiper .z-hd-bu1 {
width: 100%;
height: 70px; }
.image-swiper .z-hd-d1 {
width: 100%;
height: 70px;
background: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 200;
overflow: hidden;
box-shadow: 0 0 10px rgba(213, 25, 32, 0.2); }
.image-swiper .z-hd-i1 {
width: 170px;
position: absolute;
top: calc(50% - 25px);
left: 1.0625%; }
.image-swiper .z-hd-p1 {
font-size: 13px;
line-height: 22px;
color: #454545;
position: absolute;
top: calc(50% - 22px);
left: calc(170px + 2.0125%); }
.image-swiper .z-hd-d2 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 28.8958%; }
.image-swiper .z-hd-d3 {
height: 100%;
position: relative;
float: left;
padding-top: calc(35px - 7px);
box-sizing: border-box; }
.image-swiper .z-hd-d4 {
height: 13px;
padding: 0 6px;
border-right: 1px solid #cccccc;
box-sizing: border-box; }
.image-swiper .z-hd-d3:last-child .z-hd-d4 {
border: 0; }
.image-swiper .z-hd-p2 {
padding: 0 4px;
position: relative;
font-size: 13px;
line-height: 14px;
color: #333333;
transition: 0.5s;
height: calc((70px + 14px) / 2); }
.image-swiper .z-hd-l1 {
width: 0;
height: 4px;
background: #b90c12;
position: absolute;
bottom: 0;
left: 50%;
transition: 0.5s; }
.image-swiper .z-hd-p2:hover {
color: #b90c12;
transition: 0.5s; }
.image-swiper .z-hd-p2:hover .z-hd-l1 {
width: 100%;
left: 0;
transition: 0.5s; }
.image-swiper .z-hd-d3on .z-hd-p2 {
color: #b90c12;
transition: 0.5s; }
.image-swiper .z-hd-d3on .z-hd-p2 .z-hd-l1 {
width: 100%;
left: 0;
transition: 0.5s; }
.image-swiper .z-hd-d5 {
position: absolute;
top: calc(35px - 10px);
right: 5.8521%; }
.image-swiper .z-hd-i2 {
width: 20px;
float: left;
margin-right: 8px; }
.image-swiper .z-hd-p3 {
font-size: 22px;
line-height: 20px;
color: #d51920;
font-family: "din";
float: left; }
.image-swiper .z-hd-bt1 {
width: 70px;
height: 100%;
background: none;
position: absolute;
top: 0;
right: 0;
cursor: pointer; }
.image-swiper .z-hd-bt1 > b {
display: block;
background: #b90c12;
position: absolute;
left: 21px;
height: 3px;
border: 0;
border-radius: 2px;
transition: 0.5s; }
.image-swiper .z-hd-bt1 > b:nth-child(1) {
width: 32px;
top: 22px; }
.image-swiper .z-hd-bt1 > b:nth-child(2) {
width: 24px;
top: 33px; }
.image-swiper .z-hd-bt1 > b:nth-child(3) {
width: 32px;
top: 44px; }
.image-swiper .z-hd-bt1on > b:nth-child(1) {
top: 33px;
transform: rotate(405deg);
transition: 0.5s; }
.image-swiper .z-hd-bt1on > b:nth-child(2) {
width: 0;
transition: 0.5s; }
.image-swiper .z-hd-bt1on > b:nth-child(3) {
top: 33px;
transform: rotate(-405deg);
transition: 0.5s; }
.image-swiper .z-menu1-d1 {
display: none; }
.image-swiper .z-menu2-d1 {
width: 100%;
height: 81.5217%;
display: none;
background: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 190; }
.image-swiper .z-menu2-d2 {
position: absolute;
top: calc(50% - (56px * 4));
left: 20.3958%; }
.image-swiper .z-menu2-d3 {
position: relative; }
.image-swiper .z-menu2-d3 > div {
font-size: 20px;
line-height: 56px;
color: #333333;
transition: 0.5s; }
.image-swiper .z-menu2-d3:hover > div {
color: #c2322c;
transition: 0.5s; }
.image-swiper .z-menu2-d3 > b:nth-child(2) {
width: 0;
height: 1px;
background: #c2322c;
transition: 0.5s;
position: absolute;
top: 50%;
right: calc(100% + 20px); }
.image-swiper .z-menu2-d3:hover > b:nth-child(2) {
width: 34px;
transition: 0.5s; }
.image-swiper .z-menu2-d3 > b:nth-child(3) {
width: 0;
height: 1px;
background: #c2322c;
transition: 0.5s;
position: absolute;
top: 50%;
left: calc(100% + 20px); }
.image-swiper .z-menu2-d3:hover > b:nth-child(3) {
width: 180%;
transition: 0.5s; }
.image-swiper .z-menu2-d4 {
width: 59.375%;
position: absolute;
top: calc(50% - (56px * 2));
left: 38.0208%; }
.image-swiper .z-menu2-d5 {
width: 100%;
position: absolute;
top: 0;
left: 0;
display: none; }
.image-swiper .z-menu2-d6 {
width: 33.3333%;
float: left;
position: relative;
height: 60px; }
.image-swiper .z-menu2-d6 > div {
font-size: 14px;
line-height: 50px;
color: #4e4e4e;
transition: 0.5s;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-menu2-d6:hover > div {
font-weight: bold;
color: #c2322c;
transition: 0.5s; }
.image-swiper .z-menu2-d6 > div > b:nth-child(2) {
width: 0;
height: 1px;
background: #c2322c;
transition: 0.5s;
position: absolute;
top: 50%;
right: calc(100% + 20px); }
.image-swiper .z-menu2-d6 > div:hover > b:nth-child(2) {
width: 34px;
transition: 0.5s; }
.image-swiper .z-menu2-d6 > div > b:nth-child(3) {
width: 0;
height: 1px;
background: #c2322c;
transition: 0.5s;
position: absolute;
top: 50%;
left: calc(100% + 20px); }
.image-swiper .z-menu2-d6 > div:hover > b:nth-child(3) {
width: 180%;
transition: 0.5s; } }
@media only screen and (max-width: 1269px) and (min-width: 1024px) {
.image-swiper .z-hd-bu1 {
width: 100%;
height: 60px; }
.image-swiper .z-hd-d1 {
width: 100%;
height: 60px;
background: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 200;
overflow: hidden;
box-shadow: 0 0 10px rgba(213, 25, 32, 0.2); }
.image-swiper .z-hd-i1 {
width: 140px;
position: absolute;
top: calc(50% - 20px);
left: 0.8625%; }
.image-swiper .z-hd-p1 {
font-size: 12px;
line-height: 18px;
color: #454545;
position: absolute;
top: calc(50% - 18px);
left: calc(130px + 1.6125%);
display: none; }
.image-swiper .z-hd-d2 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 16.8958%; }
.image-swiper .z-hd-d3 {
height: 100%;
position: relative;
float: left;
padding-top: calc(35px - 7px);
box-sizing: border-box; }
.image-swiper .z-hd-d4 {
height: 12px;
padding: 0 6px;
border-right: 1px solid #cccccc;
box-sizing: border-box; }
.image-swiper .z-hd-d3:last-child .z-hd-d4 {
border: 0; }
.image-swiper .z-hd-p2 {
padding: 0 4px;
position: relative;
font-size: 12px;
line-height: 12px;
color: #333333;
transition: 0.5s;
height: calc((52px + 12px) / 2); }
.image-swiper .z-hd-l1 {
width: 0;
height: 4px;
background: #b90c12;
position: absolute;
bottom: 0;
left: 50%;
transition: 0.5s; }
.image-swiper .z-hd-d3on .z-hd-p2 {
color: #b90c12;
transition: 0.5s; }
.image-swiper .z-hd-d3on .z-hd-p2 .z-hd-l1 {
width: 100%;
left: 0;
transition: 0.5s; }
.image-swiper .z-hd-d5 {
position: absolute;
top: calc(35px - 8px);
right: 7.5521%; }
.image-swiper .z-hd-i2 {
width: 16px;
float: left;
margin-right: 8px; }
.image-swiper .z-hd-p3 {
font-size: 18px;
line-height: 16px;
color: #d51920;
font-family: "din";
float: left; }
.image-swiper .z-hd-bt1 {
width: 60px;
height: 100%;
background: none;
position: absolute;
top: 0;
right: 0;
cursor: pointer; }
.image-swiper .z-hd-bt1 > b {
display: block;
background: #b90c12;
position: absolute;
left: 19px;
height: 2px;
border: 0;
border-radius: 1px;
transition: 0.5s; }
.image-swiper .z-hd-bt1 > b:nth-child(1) {
width: 24px;
top: 19px; }
.image-swiper .z-hd-bt1 > b:nth-child(2) {
width: 18px;
top: 29px; }
.image-swiper .z-hd-bt1 > b:nth-child(3) {
width: 24px;
top: 39px; }
.image-swiper .z-hd-bt1on > b:nth-child(1) {
top: 29px;
transform: rotate(405deg);
transition: 0.5s; }
.image-swiper .z-hd-bt1on > b:nth-child(2) {
width: 0;
transition: 0.5s; }
.image-swiper .z-hd-bt1on > b:nth-child(3) {
top: 29px;
transform: rotate(-405deg);
transition: 0.5s; }
.image-swiper .z-menu1-d1 {
display: none; }
.image-swiper .z-menu2-d1 {
width: 100%;
height: 81.5217%;
display: none;
background: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 190; }
.image-swiper .z-menu2-d2 {
position: absolute;
top: calc(50% - (46px * 4));
left: 20.3958%; }
.image-swiper .z-menu2-d3 {
position: relative; }
.image-swiper .z-menu2-d3 > div {
font-size: 16px;
line-height: 46px;
color: #333333;
transition: 0.5s; }
.image-swiper .z-menu2-d3:active > div {
color: #c2322c;
transition: 0.5s; }
.image-swiper .z-menu2-d3 > b:nth-child(2) {
width: 0;
height: 1px;
background: #c2322c;
transition: 0.5s;
position: absolute;
top: 50%;
right: calc(100% + 20px); }
.image-swiper .z-menu2-d3:active > b:nth-child(2) {
width: 34px;
transition: 0.5s; }
.image-swiper .z-menu2-d3 > b:nth-child(3) {
width: 0;
height: 1px;
background: #c2322c;
transition: 0.5s;
position: absolute;
top: 50%;
left: calc(100% + 20px); }
.image-swiper .z-menu2-d3:active > b:nth-child(3) {
width: 200%;
transition: 0.5s; }
.image-swiper .z-menu2-d4 {
width: 59.375%;
position: absolute;
top: calc(50% - (46px * 2));
left: 38.0208%; }
.image-swiper .z-menu2-d5 {
width: 100%;
position: absolute;
top: 0;
left: 0;
display: none; }
.image-swiper .z-menu2-d6 {
width: 33.3333%;
float: left;
position: relative;
height: 60px; }
.image-swiper .z-menu2-d6 > div {
font-size: 12px;
line-height: 40px;
color: #4e4e4e;
transition: 0.5s;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-menu2-d6:active > div {
font-weight: bold;
color: #c2322c;
transition: 0.5s; }
.image-swiper .z-menu2-d6 > div > b:nth-child(2) {
width: 0;
height: 1px;
background: #c2322c;
transition: 0.5s;
position: absolute;
top: 50%;
right: calc(100% + 20px); }
.image-swiper .z-menu2-d6 > div:active > b:nth-child(2) {
width: 34px;
transition: 0.5s; }
.image-swiper .z-menu2-d6 > div > b:nth-child(3) {
width: 0;
height: 1px;
background: #c2322c;
transition: 0.5s;
position: absolute;
top: 50%;
left: calc(100% + 20px); }
.image-swiper .z-menu2-d6 > div:active > b:nth-child(3) {
width: 180%;
transition: 0.5s; } }
@media only screen and (max-width: 1023px) {
.image-swiper .z-hd-bu1 {
width: 100%;
height: 0.98rem; }
.image-swiper .z-hd-d1 {
width: 100%;
height: 0.98rem;
background: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 200;
overflow: hidden;
box-shadow: 0 0 0.1rem rgba(213, 25, 32, 0.2); }
.image-swiper .z-hd-i1 {
width: 2.29rem;
position: absolute;
top: calc(50% - 0.33rem);
left: 0.24rem; }
.image-swiper .z-hd-p1 {
font-size: 0.22rem;
line-height: 0.28rem;
color: #454545;
position: absolute;
top: calc(50% - 0.28rem);
left: 2.68rem; }
.image-swiper .z-hd-d2 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 16.8958%;
display: none; }
.image-swiper .z-hd-d5 {
position: absolute;
top: calc(35px - 8px);
right: 7.5521%;
display: none; }
.image-swiper .z-hd-bt1 {
width: 0.94rem;
height: 100%;
background: none;
position: absolute;
top: 0;
right: 0; }
.image-swiper .z-hd-bt1 > b {
display: block;
background: #b90c12;
position: absolute;
left: 0.25rem;
height: 0.04rem;
border: 0;
border-radius: 0.02rem;
transition: 0.5s; }
.image-swiper .z-hd-bt1 > b:nth-child(1) {
width: 0.44rem;
top: 0.32rem; }
.image-swiper .z-hd-bt1 > b:nth-child(2) {
width: 0.34rem;
top: 0.47rem; }
.image-swiper .z-hd-bt1 > b:nth-child(3) {
width: 0.44rem;
top: 0.62rem; }
.image-swiper .z-hd-bt1on > b:nth-child(1) {
top: 0.47rem;
transform: rotate(405deg);
transition: 0.5s; }
.image-swiper .z-hd-bt1on > b:nth-child(2) {
width: 0;
transition: 0.5s; }
.image-swiper .z-hd-bt1on > b:nth-child(3) {
top: 0.47rem;
transform: rotate(-405deg);
transition: 0.5s; }
.image-swiper .z-menu2-d1 {
display: none; }
.image-swiper .z-menu1-d1 {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #3f3f3f;
z-index: 190; }
.image-swiper .z-menu1-i1 {
width: 2.82rem;
position: absolute;
top: calc(50% - 1.55rem);
left: calc(50% - 1.41rem); }
.image-swiper .z-menu1-d2 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 0.98rem 0;
box-sizing: border-box;
overflow: hidden;
overflow-y: auto; }
.image-swiper .z-menu1-d3 {
width: 100%; }
.image-swiper .z-menu1-d4 {
width: calc(100% - 0.88rem);
margin: 0 auto;
height: 1.14rem;
position: relative;
border-bottom: 1px solid #484848; }
.image-swiper .z-menu1-l1 {
width: 0.06rem;
height: 0.26rem;
border: 0;
border-radius: 0.03rem;
background: #d51920;
position: absolute;
top: calc(50% - 0.13rem);
left: 0; }
.image-swiper .z-menu1-p1 {
font-size: 0.28rem;
line-height: 1.14rem;
color: #fff;
position: absolute;
top: 0;
left: 0.26rem;
transition: 0.5s; }
.image-swiper .z-menu1-a1 {
width: 0.14rem;
position: absolute;
top: calc(50% - 0.12rem);
right: 0;
transform: rotate(90deg);
transition: 0.5s; }
.image-swiper .z-menu1-d3 ul {
width: 100%;
margin: 0 auto;
position: relative;
border-bottom: 1px solid #484848;
padding: 0.26rem 0.44rem;
box-sizing: border-box;
display: none;
background: rgba(0, 0, 0, 0.2); }
.image-swiper .z-menu1-d3 ul li {
width: 25%;
height: 0.8rem;
font-size: 0.26rem;
line-height: 0.8rem;
color: #b3b3b3;
text-align: center;
float: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.image-swiper .z-menu1-d3on .z-menu1-p1 {
color: #d51920;
transition: 0.5s; }
.image-swiper .z-menu1-d3on .z-menu1-a1 {
transform: rotate(0deg);
transition: 0.5s; } }
@media only screen and (min-width: 1440px) {
.image-swiper .z-sy1-d1 {
width: 100%;
height: 0;
padding-bottom: 47.3958%;
position: relative;
overflow: hidden; }
.image-swiper .sw1 {
width: 100% !important;
height: 100% !important;
position: absolute;
top: 0;
left: 0; }
.image-swiper .sw1 .swiper-slide {
width: 100% !important; }
.image-swiper .sw1 .swiper-slide > img {
width: 100% !important; }
.image-swiper .z-sy1-p1 {
width: 7.76%;
position: absolute;
top: 0;
left: 0;
animation: sw1 2s linear infinite; }
.image-swiper .z-sy1-p2 {
width: 13.8%;
position: absolute;
bottom: 0;
right: 0;
animation: sw2 2s linear infinite; }
.image-swiper .z-sy1-p3 {
width: 65.26%;
position: absolute;
bottom: 0;
left: calc((100% - 65.26%) / 2); }
.image-swiper .z-sy1-p4 {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%; }
.image-swiper .z-sy1-p5 {
width: 48.7%;
position: absolute;
bottom: 16.81%;
left: calc((100% - 48.7%) / 2);
animation: sw3 4s linear infinite; }
.image-swiper .z-sy1-p6 {
width: 48.7%;
position: absolute;
top: 0;
left: calc((100% - 48.7%) / 2);
animation: sw4 4s linear infinite; }
.image-swiper .z-sy1-p7 {
width: 27.08%;
position: absolute;
top: 15.6%;
left: calc((100% - 27.08%) / 2); }
.image-swiper .z-sy1-p8 {
width: 32.45%;
position: absolute;
top: 22.86%;
left: calc((100% - 32.45%) / 2); }
.image-swiper .z-sy1-p9 {
width: 19.32%;
position: absolute;
top: 34.62%;
left: calc((100% - 19.32%) / 2); }
.image-swiper .z-sy1-p10 {
width: 3.65%;
position: absolute;
top: 42.09%;
left: 61.67%; }
.image-swiper .z-sy1-p11 {
width: 17.4%;
position: absolute;
top: 51.65%;
left: 61.67%; }
.image-swiper .sw1 .swiper-slide-active .z-sy1-p4 {
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: 2.5s; }
@keyframes sw1 {
0% {
top: 0;
opacity: 1; }
50% {
top: -2%;
opacity: 0.8; }
100% {
top: 0;
opacity: 1; } }
@keyframes sw2 {
0% {
bottom: 0;
opacity: 1; }
50% {
bottom: -2%;
opacity: 0.8; }
100% {
bottom: 0;
opacity: 1; } }
@keyframes sw3 {
0% {
bottom: 5%;
opacity: 1;
transform: scale(1); }
50% {
bottom: 12%;
opacity: 0.2;
transform: scale(1.2); }
100% {
bottom: 5%;
opacity: 1;
transform: scale(1); } }
@keyframes sw4 {
0% {
top: 0; }
50% {
top: -4%; }
100% {
top: 0; } }
.image-swiper .pa1 {
position: absolute;
bottom: 4.3956%;
left: 0; }
.image-swiper .pa1 .swiper-pagination-bullet {
width: 50px;
height: 2px;
background: #fff;
border-radius: 0;
opacity: 1;
margin: 0 13px;
transition: 0.5s; }
.image-swiper .pa1 .swiper-pagination-bullet-active {
background: #b81c22;
transition: 0.5s; }
.image-swiper .z-sy1-d2 {
width: 15.625%;
height: 98px;
position: absolute;
bottom: 0;
right: 0;
background: #212121;
display: flex;
justify-content: space-around;
z-index: 2;
padding: 0 4px;
box-sizing: border-box; }
.image-swiper .z-sy1-i1 {
width: 24px;
padding-top: calc(49px - 16px); }
.image-swiper .z-sy1-x1 {
font-size: 16px;
line-height: 16px;
color: #fff;
padding-top: calc(49px - 8px);
white-space: nowrap; }
.image-swiper .z-sy1-i2 {
width: 13px;
padding-top: calc(49px - 12px); }
.image-swiper .z-sy1-d3 {
width: 31.25%;
height: 98px;
position: absolute;
bottom: 0;
right: 15.625%;
background: #d51920;
z-index: 2; }
.image-swiper .z-sy1-k1 {
width: 28px;
height: 26px;
position: absolute;
top: calc(50% - 13px);
left: 4.33%; }
.image-swiper .z-sy1-k2 {
width: 17px;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy1-k3 {
width: 3px;
position: absolute;
top: 10px;
left: 19px;
animation: news1 2s linear infinite; }
.image-swiper .z-sy1-k4 {
width: 7px;
position: absolute;
top: 6px;
right: 0;
animation: news2 2s linear infinite; }
@keyframes news1 {
0% {
opacity: 0; }
33.33% {
opacity: 1; }
66.67% {
opacity: 0; }
100% {
opacity: 0; } }
@keyframes news2 {
0% {
opacity: 0; }
33.33% {
opacity: 0; }
66.67% {
opacity: 1; }
100% {
opacity: 0; } }
.image-swiper .z-sy1-k5 {
width: 80.66%;
position: absolute;
top: calc(50% - 8px);
right: 6%;
height: 18px;
overflow: hidden; }
.image-swiper .z-sy1-k6 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy1-k7 {
width: 100%;
position: absolute;
height: 100%;
font-size: 16px;
line-height: 18px;
color: #fff;
top: 50%;
transform: translateZ(-9px) rotateX(-90deg);
background: #d51920;
z-index: 1; }
.image-swiper .z-sy1-k7on1 {
top: 0;
transform: translateZ(0px) rotateX(0deg);
transition: 0.3s;
z-index: 2; }
.image-swiper .z-sy1-k7on2 {
top: -50%;
transform: translateZ(-90px) rotateX(180deg);
transition: 0.3s;
z-index: 1; }
.image-swiper .z-sy1-d4 {
width: 6.25%;
height: 98px;
background: #f9f7f7;
position: absolute;
bottom: 0;
right: 46.875%;
z-index: 2; }
.image-swiper .z-sy1-s1 {
width: 36px;
height: 36px;
position: absolute;
top: calc(50% - 18px);
left: calc(50% - 18px); }
.image-swiper .z-sy1-s1 img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; } }
@media only screen and (max-width: 1439px) and (min-width: 1270px) {
.image-swiper .z-sy1-d1 {
width: 100%;
height: 0;
padding-bottom: 47.3958%;
position: relative;
overflow: hidden; }
.image-swiper .sw1 {
width: 100% !important;
height: 100% !important;
position: absolute;
top: 0;
left: 0; }
.image-swiper .sw1 .swiper-slide {
width: 100% !important; }
.image-swiper .sw1 .swiper-slide > img {
width: 100% !important; }
.image-swiper .z-sy1-p1 {
width: 7.76%;
position: absolute;
top: 0;
left: 0;
animation: sw1 2s linear infinite; }
.image-swiper .z-sy1-p2 {
width: 13.8%;
position: absolute;
bottom: 0;
right: 0;
animation: sw2 2s linear infinite; }
.image-swiper .z-sy1-p3 {
width: 65.26%;
position: absolute;
bottom: 0;
left: calc((100% - 65.26%) / 2); }
.image-swiper .z-sy1-p4 {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%; }
.image-swiper .z-sy1-p5 {
width: 48.7%;
position: absolute;
bottom: 16.81%;
left: calc((100% - 48.7%) / 2);
animation: sw3 4s linear infinite; }
.image-swiper .z-sy1-p6 {
width: 48.7%;
position: absolute;
top: 0;
left: calc((100% - 48.7%) / 2);
animation: sw4 4s linear infinite; }
.image-swiper .z-sy1-p7 {
width: 27.08%;
position: absolute;
top: 15.6%;
left: calc((100% - 27.08%) / 2); }
.image-swiper .z-sy1-p8 {
width: 32.45%;
position: absolute;
top: 22.86%;
left: calc((100% - 32.45%) / 2); }
.image-swiper .z-sy1-p9 {
width: 19.32%;
position: absolute;
top: 34.62%;
left: calc((100% - 19.32%) / 2); }
.image-swiper .z-sy1-p10 {
width: 3.65%;
position: absolute;
top: 42.09%;
left: 61.67%; }
.image-swiper .z-sy1-p11 {
width: 17.4%;
position: absolute;
top: 51.65%;
left: 61.67%; }
.image-swiper .sw1 .swiper-slide-active .z-sy1-p4 {
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: 2.5s; }
@keyframes sw1 {
0% {
top: 0;
opacity: 1; }
50% {
top: -2%;
opacity: 0.8; }
100% {
top: 0;
opacity: 1; } }
@keyframes sw2 {
0% {
bottom: 0;
opacity: 1; }
50% {
bottom: -2%;
opacity: 0.8; }
100% {
bottom: 0;
opacity: 1; } }
@keyframes sw3 {
0% {
bottom: 5%;
opacity: 1;
transform: scale(1); }
50% {
bottom: 12%;
opacity: 0.2;
transform: scale(1.2); }
100% {
bottom: 5%;
opacity: 1;
transform: scale(1); } }
@keyframes sw4 {
0% {
top: 0; }
50% {
top: -4%; }
100% {
top: 0; } }
.image-swiper .pa1 {
position: absolute;
bottom: 4.3956%;
left: 0; }
.image-swiper .pa1 .swiper-pagination-bullet {
width: 40px;
height: 2px;
background: #fff;
border-radius: 0;
opacity: 1;
margin: 0 10px;
transition: 0.5s; }
.image-swiper .pa1 .swiper-pagination-bullet-active {
background: #b81c22;
transition: 0.5s; }
.image-swiper .z-sy1-d2 {
width: 15.625%;
height: 80px;
position: absolute;
bottom: 0;
right: 0;
background: #212121;
display: flex;
justify-content: space-around;
z-index: 2;
padding: 0 4px;
box-sizing: border-box; }
.image-swiper .z-sy1-i1 {
width: 20px;
padding-top: calc(40px - 13px); }
.image-swiper .z-sy1-x1 {
font-size: 14px;
line-height: 16px;
color: #fff;
padding-top: calc(40px - 8px);
white-space: nowrap; }
.image-swiper .z-sy1-i2 {
width: 10px;
padding-top: calc(40px - 11px); }
.image-swiper .z-sy1-d3 {
width: 31.25%;
height: 80px;
position: absolute;
bottom: 0;
right: 15.625%;
background: #d51920;
z-index: 2; }
.image-swiper .z-sy1-k1 {
width: 28px;
height: 26px;
position: absolute;
top: calc(50% - 13px);
left: 4.33%; }
.image-swiper .z-sy1-k2 {
width: 17px;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy1-k3 {
width: 3px;
position: absolute;
top: 10px;
left: 19px;
animation: news1 2s linear infinite; }
.image-swiper .z-sy1-k4 {
width: 7px;
position: absolute;
top: 6px;
right: 0;
animation: news2 2s linear infinite; }
@keyframes news1 {
0% {
opacity: 0; }
33.33% {
opacity: 1; }
66.67% {
opacity: 0; }
100% {
opacity: 0; } }
@keyframes news2 {
0% {
opacity: 0; }
33.33% {
opacity: 0; }
66.67% {
opacity: 1; }
100% {
opacity: 0; } }
.image-swiper .z-sy1-k5 {
width: 76%;
position: absolute;
top: calc(50% - 8px);
right: 6%;
height: 16px;
overflow: hidden; }
.image-swiper .z-sy1-k6 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy1-k7 {
width: 100%;
position: absolute;
height: 100%;
font-size: 14px;
line-height: 16px;
color: #fff;
top: 50%;
transform: translateZ(-8px) rotateX(-90deg);
background: #d51920;
z-index: 1; }
.image-swiper .z-sy1-k7on1 {
top: 0;
transform: translateZ(0px) rotateX(0deg);
transition: 1.2s;
z-index: 2; }
.image-swiper .z-sy1-k7on2 {
top: -50%;
transform: translateZ(-8px) rotateX(90deg);
transition: 1.2s;
z-index: 1; }
.image-swiper .z-sy1-d4 {
width: 6.25%;
height: 80px;
background: #f9f7f7;
position: absolute;
bottom: 0;
right: 46.875%;
z-index: 2; }
.image-swiper .z-sy1-s1 {
width: 30px;
height: 30px;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 15px); }
.image-swiper .z-sy1-s1 img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; } }
@media only screen and (max-width: 1269px) and (min-width: 1024px) {
.image-swiper .z-sy1-d1 {
width: 100%;
height: 0;
padding-bottom: 47.3958%;
position: relative;
overflow: hidden; }
.image-swiper .sw1 {
width: 100% !important;
height: 100% !important;
position: absolute;
top: 0;
left: 0; }
.image-swiper .sw1 .swiper-slide {
width: 100% !important; }
.image-swiper .sw1 .swiper-slide > img {
width: 100% !important; }
.image-swiper .z-sy1-p1 {
width: 7.76%;
position: absolute;
top: 0;
left: 0;
animation: sw1 2s linear infinite; }
.image-swiper .z-sy1-p2 {
width: 13.8%;
position: absolute;
bottom: 0;
right: 0;
animation: sw2 2s linear infinite; }
.image-swiper .z-sy1-p3 {
width: 65.26%;
position: absolute;
bottom: 0;
left: calc((100% - 65.26%) / 2); }
.image-swiper .z-sy1-p4 {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%; }
.image-swiper .z-sy1-p5 {
width: 48.7%;
position: absolute;
bottom: 16.81%;
left: calc((100% - 48.7%) / 2);
animation: sw3 4s linear infinite; }
.image-swiper .z-sy1-p6 {
width: 48.7%;
position: absolute;
top: 0;
left: calc((100% - 48.7%) / 2);
animation: sw4 4s linear infinite; }
.image-swiper .z-sy1-p7 {
width: 27.08%;
position: absolute;
top: 15.6%;
left: calc((100% - 27.08%) / 2); }
.image-swiper .z-sy1-p8 {
width: 32.45%;
position: absolute;
top: 22.86%;
left: calc((100% - 32.45%) / 2); }
.image-swiper .z-sy1-p9 {
width: 19.32%;
position: absolute;
top: 34.62%;
left: calc((100% - 19.32%) / 2); }
.image-swiper .z-sy1-p10 {
width: 3.65%;
position: absolute;
top: 42.09%;
left: 61.67%; }
.image-swiper .z-sy1-p11 {
width: 17.4%;
position: absolute;
top: 51.65%;
left: 61.67%; }
.image-swiper .sw1 .swiper-slide-active .z-sy1-p4 {
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: 2.5s; }
@keyframes sw1 {
0% {
top: 0;
opacity: 1; }
50% {
top: -2%;
opacity: 0.8; }
100% {
top: 0;
opacity: 1; } }
@keyframes sw2 {
0% {
bottom: 0;
opacity: 1; }
50% {
bottom: -2%;
opacity: 0.8; }
100% {
bottom: 0;
opacity: 1; } }
@keyframes sw3 {
0% {
bottom: 5%;
opacity: 1;
transform: scale(1); }
50% {
bottom: 12%;
opacity: 0.2;
transform: scale(1.2); }
100% {
bottom: 5%;
opacity: 1;
transform: scale(1); } }
@keyframes sw4 {
0% {
top: 0; }
50% {
top: -4%; }
100% {
top: 0; } }
.image-swiper .pa1 {
position: absolute;
bottom: 4.3956%;
left: 0; }
.image-swiper .pa1 .swiper-pagination-bullet {
width: 30px;
height: 2px;
background: #fff;
border-radius: 0;
opacity: 1;
margin: 0 8px;
transition: 0.5s; }
.image-swiper .pa1 .swiper-pagination-bullet-active {
background: #b81c22;
transition: 0.5s; }
.image-swiper .z-sy1-d2 {
width: 15.625%;
height: 60px;
position: absolute;
bottom: 0;
right: 0;
background: #212121;
display: flex;
justify-content: space-around;
z-index: 2;
padding: 0 4px;
box-sizing: border-box; }
.image-swiper .z-sy1-i1 {
width: 16px;
padding-top: calc(30px - 12px); }
.image-swiper .z-sy1-x1 {
font-size: 12px;
line-height: 16px;
color: #fff;
padding-top: calc(30px - 8px);
white-space: nowrap; }
.image-swiper .z-sy1-i2 {
width: 8px;
padding-top: calc(30px - 7px); }
.image-swiper .z-sy1-d3 {
width: 31.25%;
height: 60px;
position: absolute;
bottom: 0;
right: 15.625%;
background: #d51920;
z-index: 2; }
.image-swiper .z-sy1-k1 {
width: 28px;
height: 26px;
position: absolute;
top: calc(50% - 13px);
left: 4.33%; }
.image-swiper .z-sy1-k2 {
width: 17px;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy1-k3 {
width: 3px;
position: absolute;
top: 10px;
left: 19px;
animation: news1 2s linear infinite; }
.image-swiper .z-sy1-k4 {
width: 7px;
position: absolute;
top: 6px;
right: 0;
animation: news2 2s linear infinite; }
@keyframes news1 {
0% {
opacity: 0; }
33.33% {
opacity: 1; }
66.67% {
opacity: 0; }
100% {
opacity: 0; } }
@keyframes news2 {
0% {
opacity: 0; }
33.33% {
opacity: 0; }
66.67% {
opacity: 1; }
100% {
opacity: 0; } }
.image-swiper .z-sy1-k5 {
width: 76%;
position: absolute;
top: calc(50% - 8px);
right: 6%;
height: 16px;
overflow: hidden; }
.image-swiper .z-sy1-k6 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy1-k7 {
width: 100%;
position: absolute;
height: 100%;
font-size: 12px;
line-height: 16px;
color: #fff;
top: 50%;
transform: translateZ(-8px) rotateX(-90deg);
background: #d51920;
z-index: 1; }
.image-swiper .z-sy1-k7on1 {
top: 0;
transform: translateZ(0px) rotateX(0deg);
transition: 1.2s;
z-index: 2; }
.image-swiper .z-sy1-k7on2 {
top: -50%;
transform: translateZ(-8px) rotateX(90deg);
transition: 1.2s;
z-index: 1; }
.image-swiper .z-sy1-d4 {
width: 6.25%;
height: 60px;
background: #f9f7f7;
position: absolute;
bottom: 0;
right: 46.875%;
z-index: 2; }
.image-swiper .z-sy1-s1 {
width: 24px;
height: 24px;
position: absolute;
top: calc(50% - 12px);
left: calc(50% - 12px); }
.image-swiper .z-sy1-s1 img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; } }
@media only screen and (max-width: 1023px) {
.image-swiper .z-sy1-d1 {
width: 100%;
height: 6.32rem;
position: relative;
overflow: hidden; }
.image-swiper .sw1 {
width: 100% !important;
height: 5.34rem !important;
position: absolute;
top: 0;
left: 0; }
.image-swiper .sw1 .swiper-slide {
width: 100% !important; }
.image-swiper .sw1 .swiper-slide > img {
height: 100% !important;
margin-left: -25.06%; }
.image-swiper .z-sy1-p1 {
width: 7.76%;
position: absolute;
top: 0;
left: 0;
animation: sw1 2s linear infinite;
display: none; }
.image-swiper .z-sy1-p2 {
width: 13.8%;
position: absolute;
bottom: 0;
right: 0;
animation: sw2 2s linear infinite;
display: none; }
.image-swiper .z-sy1-p3 {
width: 100%;
position: absolute;
bottom: 0;
left: 0; }
.image-swiper .z-sy1-p4 {
width: 0;
position: absolute;
top: 50%;
left: 50%; }
.image-swiper .z-sy1-p5 {
width: 5.3rem;
position: absolute;
bottom: 16.81%;
left: calc((100% - 5.3rem) / 2);
animation: sw3 4s linear infinite; }
.image-swiper .z-sy1-p6 {
width: 5.3rem;
position: absolute;
top: 0;
left: calc((100% - 5.3rem) / 2);
animation: sw4 4s linear infinite; }
.image-swiper .z-sy1-p7 {
width: 3.08rem;
position: absolute;
top: 0.8rem;
left: calc((100% - 3.08rem) / 2); }
.image-swiper .z-sy1-p8 {
width: 3.7rem;
position: absolute;
top: 1.2rem;
left: calc((100% - 3.7rem) / 2); }
.image-swiper .z-sy1-p9 {
width: 2.2rem;
position: absolute;
top: 1.85rem;
left: calc((100% - 2.2rem) / 2); }
.image-swiper .z-sy1-p10 {
width: 0.42rem;
position: absolute;
top: 2.24rem;
left: 5rem; }
.image-swiper .z-sy1-p11 {
width: 1.98rem;
position: absolute;
top: 2.76rem;
left: 5rem; }
.image-swiper .sw1 .swiper-slide-active .z-sy1-p4 {
width: 120%;
top: 10%;
left: -10%;
transition: 2.5s; }
@keyframes sw1 {
0% {
top: 0;
opacity: 1; }
50% {
top: -2%;
opacity: 0.8; }
100% {
top: 0;
opacity: 1; } }
@keyframes sw2 {
0% {
bottom: 0;
opacity: 1; }
50% {
bottom: -2%;
opacity: 0.8; }
100% {
bottom: 0;
opacity: 1; } }
@keyframes sw3 {
0% {
bottom: 0.5rem;
opacity: 1;
transform: scale(1); }
50% {
bottom: 1rem;
opacity: 0.2;
transform: scale(1.2); }
100% {
bottom: 0.5rem;
opacity: 1;
transform: scale(1); } }
@keyframes sw4 {
0% {
top: 0; }
50% {
top: -0.4rem; }
100% {
top: 0; } }
.image-swiper .pa1 {
position: absolute;
bottom: 1.28rem;
left: 0.24rem; }
.image-swiper .pa1 .swiper-pagination-bullet {
width: 0.3rem;
height: 2px;
background: #fff;
border-radius: 0;
opacity: 1;
margin: 0 0.08rem;
transition: 0.5s; }
.image-swiper .pa1 .swiper-pagination-bullet-active {
background: #b81c22;
transition: 0.5s; }
.image-swiper .z-sy1-d2 {
width: 50%;
height: 0.88rem;
position: absolute;
bottom: 0.98rem;
right: 0;
background: #212121;
display: flex;
justify-content: space-around;
z-index: 2;
padding: 0 0.2rem;
box-sizing: border-box; }
.image-swiper .z-sy1-i1 {
width: 0.24rem;
padding-top: calc(0.44rem - 0.16rem); }
.image-swiper .z-sy1-x1 {
font-size: 0.26rem;
line-height: 0.26rem;
color: #fff;
padding-top: calc(0.44rem - 0.13rem);
white-space: nowrap; }
.image-swiper .z-sy1-i2 {
width: 0.12rem;
padding-top: calc(0.44rem - 0.08rem); }
.image-swiper .z-sy1-d3 {
width: calc(100% - 0.9rem);
height: 0.98rem;
position: absolute;
bottom: 0;
right: 0;
background: #d51920;
z-index: 2; }
.image-swiper .z-sy1-k1 {
width: 0.34rem;
height: 0.34rem;
position: absolute;
top: calc(50% - 0.17rem);
left: 0.18rem; }
.image-swiper .z-sy1-k2 {
width: 0.2rem;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy1-k3 {
width: 0.04rem;
position: absolute;
top: 0.13rem;
left: 0.23rem;
animation: news1 2s linear infinite; }
.image-swiper .z-sy1-k4 {
width: 0.07rem;
position: absolute;
top: 0.08rem;
right: 0;
animation: news2 2s linear infinite; }
@keyframes news1 {
0% {
opacity: 0; }
33.33% {
opacity: 1; }
66.67% {
opacity: 0; }
100% {
opacity: 0; } }
@keyframes news2 {
0% {
opacity: 0; }
33.33% {
opacity: 0; }
66.67% {
opacity: 1; }
100% {
opacity: 0; } }
.image-swiper .z-sy1-k5 {
width: calc(100% - 0.9rem);
position: absolute;
top: calc(50% - 0.2rem);
right: 0.24rem;
height: 0.4rem;
overflow: hidden; }
.image-swiper .z-sy1-k6 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy1-k7 {
width: 100%;
position: absolute;
height: 100%;
font-size: 0.24rem;
line-height: 0.4rem;
color: #fff;
top: 50%;
transform: translateZ(-0.2rem) rotateX(-90deg);
background: #d51920;
z-index: 1; }
.image-swiper .z-sy1-k7on1 {
top: 0;
transform: translateZ(0px) rotateX(0deg);
transition: 1.2s;
z-index: 2; }
.image-swiper .z-sy1-k7on2 {
top: -50%;
transform: translateZ(-0.2rem) rotateX(90deg);
transition: 1.2s;
z-index: 1; }
.image-swiper .z-sy1-d4 {
width: 0.9rem;
height: 0.98rem;
background: #f9f7f7;
position: absolute;
bottom: 0;
left: 0;
z-index: 2; }
.image-swiper .z-sy1-s1 {
width: 0.36rem;
height: 0.36rem;
position: absolute;
top: calc(50% - 0.18rem);
left: calc(50% - 0.18rem); }
.image-swiper .z-sy1-s1 img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; } }
@media only screen and (min-width: 1440px) {
.image-swiper .z-title1-d1 {
width: 100%;
height: 0;
padding-bottom: 10%;
position: relative;
overflow: hidden; }
.image-swiper .z-title1-p1 {
font-size: 36px;
line-height: 36px;
color: #232323;
position: absolute;
top: calc(50% - 33px);
left: 2.5%; }
.image-swiper .z-title1-p2 {
font-size: 16px;
line-height: 16px;
color: #505050;
position: absolute;
bottom: calc(50% - 33px);
left: 2.5%; }
.image-swiper .z-title1-bt1 {
width: 50px;
height: 50px;
position: absolute;
top: 46.875%;
right: 1.5625%; }
.image-swiper .z-title1-c1 {
width: 100%;
height: 100%;
border: 1px solid #c2c2c2;
border-radius: 50%;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-title1-c2 {
width: 0;
height: 0;
border: 0;
border-radius: 50%;
box-sizing: border-box;
background: #d51920;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transition: 0.5s; }
.image-swiper .z-title1-bt1:hover .z-title1-c2 {
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 1;
transition: 0.5s; }
.image-swiper .z-title1-i1 {
width: 14px;
position: absolute;
left: calc(50% - 7px);
top: calc(50% - 5px); }
.image-swiper .z-title1-i1 img {
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s; }
.image-swiper .z-title1-i1 img:nth-child(1) {
opacity: 1; }
.image-swiper .z-title1-i1 img:nth-child(2) {
opacity: 0; }
.image-swiper .z-title1-bt1:hover .z-title1-i1 img:nth-child(1) {
opacity: 0;
transition: 0.5s; }
.image-swiper .z-title1-bt1:hover .z-title1-i1 img:nth-child(2) {
opacity: 1;
transition: 0.5s; }
.image-swiper .z-title1-l1 {
width: 6px;
height: 66px;
background: #d51920;
position: absolute;
top: calc(50% - 33px);
left: 1.4%; } }
@media only screen and (max-width: 1439px) and (min-width: 1270px) {
.image-swiper .z-title1-d1 {
width: 100%;
height: 0;
padding-bottom: 10%;
position: relative;
overflow: hidden; }
.image-swiper .z-title1-p1 {
font-size: 30px;
line-height: 30px;
color: #232323;
position: absolute;
top: calc(50% - 33px);
left: 2.5%; }
.image-swiper .z-title1-p2 {
font-size: 14px;
line-height: 14px;
color: #505050;
position: absolute;
bottom: calc(50% - 33px);
left: 2.5%; }
.image-swiper .z-title1-bt1 {
width: 40px;
height: 40px;
position: absolute;
top: 46.875%;
right: 1.5625%; }
.image-swiper .z-title1-c1 {
width: 100%;
height: 100%;
border: 1px solid #c2c2c2;
border-radius: 50%;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-title1-c2 {
width: 0;
height: 0;
border: 0;
border-radius: 50%;
box-sizing: border-box;
background: #d51920;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transition: 0.5s; }
.image-swiper .z-title1-bt1:hover .z-title1-c2 {
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 1;
transition: 0.5s; }
.image-swiper .z-title1-i1 {
width: 12px;
position: absolute;
left: calc(50% - 6px);
top: calc(50% - 5px); }
.image-swiper .z-title1-i1 img {
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s; }
.image-swiper .z-title1-i1 img:nth-child(1) {
opacity: 1; }
.image-swiper .z-title1-i1 img:nth-child(2) {
opacity: 0; }
.image-swiper .z-title1-bt1:hover .z-title1-i1 img:nth-child(1) {
opacity: 0;
transition: 0.5s; }
.image-swiper .z-title1-bt1:hover .z-title1-i1 img:nth-child(2) {
opacity: 1;
transition: 0.5s; }
.image-swiper .z-title1-l1 {
width: 6px;
height: 66px;
background: #d51920;
position: absolute;
top: calc(50% - 33px);
left: 1.4%; } }
@media only screen and (max-width: 1269px) and (min-width: 1024px) {
.image-swiper .z-title1-d1 {
width: 100%;
height: 0;
padding-bottom: 10%;
position: relative;
overflow: hidden; }
.image-swiper .z-title1-p1 {
font-size: 24px;
line-height: 24px;
color: #232323;
position: absolute;
top: calc(50% - 33px);
left: 2.5%; }
.image-swiper .z-title1-p2 {
font-size: 12px;
line-height: 12px;
color: #505050;
position: absolute;
bottom: calc(50% - 33px);
left: 2.5%; }
.image-swiper .z-title1-bt1 {
width: 30px;
height: 30px;
position: absolute;
top: 46.875%;
right: 1.5625%; }
.image-swiper .z-title1-c1 {
width: 100%;
height: 100%;
border: 1px solid #c2c2c2;
border-radius: 50%;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-title1-c2 {
width: 0;
height: 0;
border: 0;
border-radius: 50%;
box-sizing: border-box;
background: #d51920;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transition: 0.5s; }
.image-swiper .z-title1-bt1:active .z-title1-c2 {
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 1;
transition: 0.5s; }
.image-swiper .z-title1-i1 {
width: 10px;
position: absolute;
left: calc(50% - 5px);
top: calc(50% - 4px); }
.image-swiper .z-title1-i1 img {
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s; }
.image-swiper .z-title1-i1 img:nth-child(1) {
opacity: 1; }
.image-swiper .z-title1-i1 img:nth-child(2) {
opacity: 0; }
.image-swiper .z-title1-bt1:active .z-title1-i1 img:nth-child(1) {
opacity: 0;
transition: 0.5s; }
.image-swiper .z-title1-bt1:active .z-title1-i1 img:nth-child(2) {
opacity: 1;
transition: 0.5s; }
.image-swiper .z-title1-l1 {
width: 6px;
height: 66px;
background: #d51920;
position: absolute;
top: calc(50% - 33px);
left: 1.4%; } }
@media only screen and (max-width: 1023px) {
.image-swiper .z-title1-d1 {
width: 100%;
height: 2rem;
position: relative;
overflow: hidden;
background: #f4f4f4; }
.image-swiper .z-title1-p1 {
font-size: 0.36rem;
line-height: 0.36rem;
color: #232323;
position: absolute;
top: 0.65rem;
left: 0.48rem;
font-weight: bold; }
.image-swiper .z-title1-p2 {
font-size: 0.22rem;
line-height: 0.28rem;
color: #505050;
position: absolute;
top: 1.12rem;
left: 0.48rem;
max-width: 5.8rem; }
.image-swiper .z-title1-bt1 {
width: 0.36rem;
height: 0.36rem;
position: absolute;
top: 0.76rem;
right: 0.24rem; }
.image-swiper .z-title1-c1 {
width: 100%;
height: 100%;
border: 1px solid #c2c2c2;
border-radius: 50%;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-title1-c2 {
width: 0;
height: 0;
border: 0;
border-radius: 50%;
box-sizing: border-box;
background: #d51920;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transition: 0.5s; }
.image-swiper .z-title1-bt1:active .z-title1-c2 {
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 1;
transition: 0.5s; }
.image-swiper .z-title1-i1 {
width: 0.2rem;
position: absolute;
left: calc(50% - 0.1rem);
top: calc(50% - 0.07rem); }
.image-swiper .z-title1-i1 img {
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s; }
.image-swiper .z-title1-i1 img:nth-child(1) {
opacity: 1; }
.image-swiper .z-title1-i1 img:nth-child(2) {
opacity: 0; }
.image-swiper .z-title1-bt1:active .z-title1-i1 img:nth-child(1) {
opacity: 0;
transition: 0.5s; }
.image-swiper .z-title1-bt1:active .z-title1-i1 img:nth-child(2) {
opacity: 1;
transition: 0.5s; }
.image-swiper .z-title1-l1 {
width: 0.06rem;
height: 1rem;
background: #d51920;
position: absolute;
top: calc(50% - 0.5rem);
left: 0.24rem; } }
@media only screen and (min-width: 1440px) {
.image-swiper .z-sy2-d1 {
width: 100%;
background: #f7f7f7;
padding-bottom: 2.6042%; }
.image-swiper .z-sy2-d2 {
width: 96.875%;
height: 0;
padding-bottom: 21.3542%;
position: relative;
margin: 0 auto; }
.image-swiper .z-sy2-d3:first-child {
width: 65.0538%;
height: 100%;
border: 0;
border-radius: 4px;
background: #fff;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy2-d3:last-child {
width: 33.5484%;
height: 100%;
border: 0;
border-radius: 4px;
background: #fff;
position: absolute;
top: 0;
right: 0; }
.image-swiper .z-sy2-p1 {
font-size: 30px;
line-height: 30px;
color: #232323;
position: absolute;
top: 10.9756%;
font-weight: bold; }
.image-swiper .z-sy2-d3:first-child .z-sy2-p1 {
left: 4.1322%; }
.image-swiper .z-sy2-d3:last-child .z-sy2-p1 {
left: 8.0128%; }
.image-swiper .z-sy2-p2 {
font-size: 18px;
line-height: 18px;
color: #333333;
position: absolute;
top: 23.1707%; }
.image-swiper .z-sy2-d3:first-child .z-sy2-p2 {
left: 4.1322%; }
.image-swiper .z-sy2-d3:last-child .z-sy2-p2 {
left: 8.0128%; }
.image-swiper .z-sy2-d4 {
width: 100%;
height: 20.9756%;
position: absolute;
top: 50%;
left: 0; }
.image-swiper .z-sy2-d5 {
height: 100%;
border-right: 1px solid #e7e1e1;
box-sizing: border-box;
position: relative;
float: left; }
.image-swiper .z-sy2-d3:first-child .z-sy2-d5 {
width: 25%; }
.image-swiper .z-sy2-d3:last-child .z-sy2-d5 {
width: 50%; }
.image-swiper .z-sy2-d5:last-child {
border: 0; }
.image-swiper .z-sy2-k1 {
width: 0;
height: 0;
border: 0;
border-radius: 14px;
background: #d51920;
position: absolute;
top: 0;
left: 50%;
opacity: 0;
transition: 0.5s; }
.image-swiper .z-sy2-d5:hover .z-sy2-k1 {
width: 42.3841%;
height: 132.5581%;
top: -53.4883%;
left: calc((100% - 42.3841%) / 2);
opacity: 1;
transition: 0.5s; }
.image-swiper .z-sy2-i1 {
width: 100%;
height: 79.0698%;
position: absolute;
top: -25.5814%;
left: 0; }
.image-swiper .z-sy2-i1 img {
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
transition: 0.5; }
.image-swiper .z-sy2-i1 img:first-child {
opacity: 1; }
.image-swiper .z-sy2-i1 img:last-child {
opacity: 0; }
.image-swiper .z-sy2-d5:hover .z-sy2-i1 img:first-child {
opacity: 0;
transition: 0.5; }
.image-swiper .z-sy2-d5:hover .z-sy2-i1 img:last-child {
opacity: 1;
transition: 0.5; }
.image-swiper .z-sy2-p3 {
width: 90%;
font-size: 18px;
line-height: 18px;
color: #333333;
text-align: center;
position: absolute;
top: 112.7907%;
left: 5%; }
.image-swiper .z-sy2-p4 {
width: 90%;
font-size: 15px;
line-height: 15px;
color: #707070;
text-align: center;
position: absolute;
top: 160.4651%;
left: 5%; } }
@media only screen and (max-width: 1439px) and (min-width: 1270px) {
.image-swiper .z-sy2-d1 {
width: 100%;
background: #f7f7f7;
padding-bottom: 2.6042%; }
.image-swiper .z-sy2-d2 {
width: 96.875%;
height: 0;
padding-bottom: 21.3542%;
position: relative;
margin: 0 auto; }
.image-swiper .z-sy2-d3:first-child {
width: 65.0538%;
height: 100%;
border: 0;
border-radius: 4px;
background: #fff;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy2-d3:last-child {
width: 33.5484%;
height: 100%;
border: 0;
border-radius: 4px;
background: #fff;
position: absolute;
top: 0;
right: 0; }
.image-swiper .z-sy2-p1 {
font-size: 24px;
line-height: 24px;
color: #232323;
position: absolute;
top: 10.9756%;
font-weight: bold; }
.image-swiper .z-sy2-d3:first-child .z-sy2-p1 {
left: 4.1322%; }
.image-swiper .z-sy2-d3:last-child .z-sy2-p1 {
left: 8.0128%; }
.image-swiper .z-sy2-p2 {
font-size: 16px;
line-height: 16px;
color: #333333;
position: absolute;
top: 23.1707%; }
.image-swiper .z-sy2-d3:first-child .z-sy2-p2 {
left: 4.1322%; }
.image-swiper .z-sy2-d3:last-child .z-sy2-p2 {
left: 8.0128%; }
.image-swiper .z-sy2-d4 {
width: 100%;
height: 20.9756%;
position: absolute;
top: 50%;
left: 0; }
.image-swiper .z-sy2-d5 {
height: 100%;
border-right: 1px solid #e7e1e1;
box-sizing: border-box;
position: relative;
float: left; }
.image-swiper .z-sy2-d3:first-child .z-sy2-d5 {
width: 25%; }
.image-swiper .z-sy2-d3:last-child .z-sy2-d5 {
width: 50%; }
.image-swiper .z-sy2-d5:last-child {
border: 0; }
.image-swiper .z-sy2-k1 {
width: 0;
height: 0;
border: 0;
border-radius: 14px;
background: #d51920;
position: absolute;
top: 0;
left: 50%;
opacity: 0;
transition: 0.5s; }
.image-swiper .z-sy2-d5:hover .z-sy2-k1 {
width: 42.3841%;
height: 132.5581%;
top: -53.4883%;
left: calc((100% - 42.3841%) / 2);
opacity: 1;
transition: 0.5s; }
.image-swiper .z-sy2-i1 {
width: 100%;
height: 79.0698%;
position: absolute;
top: -25.5814%;
left: 0; }
.image-swiper .z-sy2-i1 img {
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
transition: 0.5; }
.image-swiper .z-sy2-i1 img:first-child {
opacity: 1; }
.image-swiper .z-sy2-i1 img:last-child {
opacity: 0; }
.image-swiper .z-sy2-d5:hover .z-sy2-i1 img:first-child {
opacity: 0;
transition: 0.5; }
.image-swiper .z-sy2-d5:hover .z-sy2-i1 img:last-child {
opacity: 1;
transition: 0.5; }
.image-swiper .z-sy2-p3 {
width: 90%;
font-size: 16px;
line-height: 16px;
color: #333333;
text-align: center;
position: absolute;
top: 112.7907%;
left: 5%; }
.image-swiper .z-sy2-p4 {
width: 90%;
font-size: 13px;
line-height: 16px;
color: #707070;
text-align: center;
position: absolute;
top: 160.4651%;
left: 5%; } }
@media only screen and (max-width: 1269px) and (min-width: 1024px) {
.image-swiper .z-sy2-d1 {
width: 100%;
background: #f7f7f7;
padding-bottom: 2.6042%; }
.image-swiper .z-sy2-d2 {
width: 96.875%;
height: 0;
padding-bottom: 21.3542%;
position: relative;
margin: 0 auto; }
.image-swiper .z-sy2-d3:first-child {
width: 65.0538%;
height: 100%;
border: 0;
border-radius: 4px;
background: #fff;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy2-d3:last-child {
width: 33.5484%;
height: 100%;
border: 0;
border-radius: 4px;
background: #fff;
position: absolute;
top: 0;
right: 0; }
.image-swiper .z-sy2-p1 {
font-size: 18px;
line-height: 18px;
color: #232323;
position: absolute;
top: 10.9756%;
font-weight: bold; }
.image-swiper .z-sy2-d3:first-child .z-sy2-p1 {
left: 4.1322%; }
.image-swiper .z-sy2-d3:last-child .z-sy2-p1 {
left: 8.0128%; }
.image-swiper .z-sy2-p2 {
font-size: 14px;
line-height: 14px;
color: #333333;
position: absolute;
top: 23.1707%; }
.image-swiper .z-sy2-d3:first-child .z-sy2-p2 {
left: 4.1322%; }
.image-swiper .z-sy2-d3:last-child .z-sy2-p2 {
left: 8.0128%; }
.image-swiper .z-sy2-d4 {
width: 100%;
height: 20.9756%;
position: absolute;
top: 50%;
left: 0; }
.image-swiper .z-sy2-d5 {
height: 100%;
border-right: 1px solid #e7e1e1;
box-sizing: border-box;
position: relative;
float: left; }
.image-swiper .z-sy2-d3:first-child .z-sy2-d5 {
width: 25%; }
.image-swiper .z-sy2-d3:last-child .z-sy2-d5 {
width: 50%; }
.image-swiper .z-sy2-d5:last-child {
border: 0; }
.image-swiper .z-sy2-k1 {
width: 0;
height: 0;
border: 0;
border-radius: 14px;
background: #d51920;
position: absolute;
top: 0;
left: 50%;
opacity: 0;
transition: 0.5s; }
.image-swiper .z-sy2-d5:active .z-sy2-k1 {
width: 42.3841%;
height: 132.5581%;
top: -53.4883%;
left: calc((100% - 42.3841%) / 2);
opacity: 1;
transition: 0.5s; }
.image-swiper .z-sy2-i1 {
width: 100%;
height: 79.0698%;
position: absolute;
top: -25.5814%;
left: 0; }
.image-swiper .z-sy2-i1 img {
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
transition: 0.5; }
.image-swiper .z-sy2-i1 img:first-child {
opacity: 1; }
.image-swiper .z-sy2-i1 img:last-child {
opacity: 0; }
.image-swiper .z-sy2-d5:active .z-sy2-i1 img:first-child {
opacity: 0;
transition: 0.5; }
.image-swiper .z-sy2-d5:active .z-sy2-i1 img:last-child {
opacity: 1;
transition: 0.5; }
.image-swiper .z-sy2-p3 {
width: 90%;
font-size: 14px;
line-height: 16px;
color: #333333;
text-align: center;
position: absolute;
top: 110.7907%;
left: 5%; }
.image-swiper .z-sy2-p4 {
width: 90%;
font-size: 12px;
line-height: 16px;
color: #707070;
text-align: center;
position: absolute;
top: 158.4651%;
left: 5%; } }
@media only screen and (max-width: 1023px) {
.image-swiper .z-sy2-d1 {
width: 100%;
background: #f4f4f4;
padding-bottom: 2.6042%; }
.image-swiper .z-sy2-d2 {
width: 100%;
position: relative;
margin: 0 auto; }
.image-swiper .z-sy2-d3:first-child {
width: 100%;
background: #fff;
position: relative;
margin-bottom: 0.18rem;
padding-top: 0.34rem; }
.image-swiper .z-sy2-d3:last-child {
width: 100%;
background: #fff;
position: relative;
padding-top: 0.34rem; }
.image-swiper .z-sy2-p1 {
font-size: 0.3rem;
line-height: 0.3rem;
color: #232323;
position: relative;
margin-left: 0.24rem;
font-weight: bold;
margin-bottom: 0.18rem; }
.image-swiper .z-sy2-p2 {
font-size: 0.22rem;
line-height: 0.22rem;
color: #333333;
position: relative;
margin-left: 0.24rem;
margin-bottom: 0.62rem; }
.image-swiper .z-sy2-d4 {
width: 100%;
position: relative; }
.image-swiper .z-sy2-d5 {
width: 50%;
height: 2.6rem;
box-sizing: border-box;
position: relative;
float: left; }
.image-swiper .z-sy2-k1 {
display: none; }
.image-swiper .z-sy2-i1 {
width: 100%;
height: 0.68rem;
position: relative;
margin-bottom: 0.42rem; }
.image-swiper .z-sy2-i1 img {
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto; }
.image-swiper .z-sy2-i1 img:first-child {
opacity: 1; }
.image-swiper .z-sy2-i1 img:last-child {
opacity: 0; }
.image-swiper .z-sy2-p3 {
width: calc(100% - 0.48rem);
font-size: 0.26rem;
line-height: 0.26rem;
color: #333333;
text-align: center;
position: relative;
margin: 0 auto;
margin-bottom: 0.2rem; }
.image-swiper .z-sy2-p4 {
width: calc(100% - 0.48rem);
font-size: 0.22rem;
line-height: 0.28rem;
color: #707070;
text-align: center;
position: relative;
margin: 0 auto; } }
@media only screen and (min-width: 1440px) {
.image-swiper .z-sy3-d1 {
width: 100%;
background: #f4f4f4; }
.image-swiper .z-sy3-d2 {
width: 96.875%;
margin: 0 auto;
margin-bottom: 2.2917%; }
.image-swiper .z-sy3-p1 {
padding: 0 2.043%;
font-size: 16px;
line-height: 45px;
color: #454545;
background: #eeeded;
transition: 0.5s;
margin-right: 4px;
float: left; }
.image-swiper .z-sy3-p1:hover {
color: #fff;
background: #b41700;
transition: 0.5s; }
.image-swiper .z-sy3-p1on {
color: #fff;
background: #b41700;
transition: 0.5s; }
.image-swiper .z-sy3-d3 {
width: 96.875%;
height: 0;
padding-bottom: 47.8125%;
position: relative;
margin: 0 auto; }
.image-swiper .z-sy3-d4 {
display: none; }
.image-swiper .z-sy3-i1 {
position: absolute;
background: #fff;
border: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px; }
.image-swiper .z-sy3-i1:nth-child(1) {
width: 32.26%;
height: 100%;
top: 0;
left: 0;
border-top-left-radius: 0;
border-top-right-radius: 0; }
.image-swiper .z-sy3-i1:nth-child(2) {
width: 32.26%;
height: 48.37%;
top: 0;
left: 33.87%; }
.image-swiper .z-sy3-i1:nth-child(3) {
width: 32.26%;
height: 48.37%;
top: 0;
right: 0; }
.image-swiper .z-sy3-i1:nth-child(4) {
width: 32.26%;
height: 48.37%;
bottom: 0;
left: 33.87%; }
.image-swiper .z-sy3-i1:nth-child(5) {
width: 32.26%;
height: 48.37%;
bottom: 0;
right: 0; }
.image-swiper .z-sy3-g1 {
width: 100%;
height: 83.33%;
position: relative;
background: #d51920; }
.image-swiper .z-sy3-i1:nth-child(1) .z-sy3-g1 {
height: 100%; }
.image-swiper .z-sy3-g1 img {
transition: 0.8s;
opacity: 1;
min-height: 100%; }
.image-swiper .z-sy3-g1:hover img {
transform: scale(1.1);
transition: 0.8s;
opacity: 0.09; }
.image-swiper .z-sy3-g6 {
width: 96px;
height: 96px;
position: absolute;
top: calc(50% - 48px);
left: calc(50% - 48px);
transition: 0.5s; }
.image-swiper .z-sy3-g6:hover {
transform: rotate(360deg);
transition: 0.5s; }
.image-swiper .z-sy3-g6 > div:nth-child(1) {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: -360px;
transition: 0.5s;
box-sizing: border-box;
border: 2px solid #fff;
border-right: 2px solid transparent;
border-radius: 50%;
transform: rotate(-45deg);
opacity: 0; }
.image-swiper .z-sy3-g6 > div:nth-child(2) {
width: 8px;
height: 8px;
border: 0;
border-radius: 50%;
background: #fff;
position: absolute;
top: -180px;
right: 16px;
transition: 0.5s;
opacity: 0; }
.image-swiper .z-sy3-g6 > div:nth-child(3) {
width: 8px;
height: 8px;
border: 0;
border-radius: 50%;
background: #fff;
position: absolute;
top: -180px;
right: 3px;
transition: 0.5s;
opacity: 0; }
.image-swiper .z-sy3-g6 > div:nth-child(4) {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy3-g6 > div:nth-child(4) b {
display: block;
position: absolute;
background: #fff;
transition: 0.5s; }
.image-swiper .z-sy3-g6 > div:nth-child(4) b:nth-child(1) {
width: 1px;
height: 40px;
top: calc(100% + 180px);
left: calc(50% - 1px);
opacity: 0; }
.image-swiper .z-sy3-g6 > div:nth-child(4) b:nth-child(2) {
width: 40px;
height: 1px;
top: calc(50% - 1px);
left: calc(100% + 360px);
opacity: 0; }
.image-swiper .z-sy3-g1:hover .z-sy3-g6 > div:nth-child(1) {
left: 0;
transition: 0.5s;
opacity: 1; }
.image-swiper .z-sy3-g1:hover .z-sy3-g6 > div:nth-child(2) {
top: 10px;
transition: 0.5s;
opacity: 1; }
.image-swiper .z-sy3-g1:hover .z-sy3-g6 > div:nth-child(3) {
top: 26px;
transition: 0.5s;
opacity: 1; }
.image-swiper .z-sy3-g1:hover .z-sy3-g6 > div:nth-child(4) b:nth-child(1) {
top: calc(50% - 20px);
opacity: 1;
transition: 0.5s; }
.image-swiper .z-sy3-g1:hover .z-sy3-g6 > div:nth-child(4) b:nth-child(2) {
left: calc(50% - 20px);
opacity: 1;
transition: 0.5s; }
.image-swiper .z-sy3-g2 {
width: 100%;
height: calc(100% - 83.33%);
background: #fff;
position: relative;
overflow: hidden; }
.image-swiper .z-sy3-i1:nth-child(1) .z-sy3-g2 {
display: none; }
.image-swiper .z-sy3-g3 {
width: 50%;
font-size: 16px;
line-height: 20px;
color: #333333;
font-weight: lighter;
position: absolute;
top: calc(50% - 10px);
left: 5%; }
.image-swiper .z-sy3-g4 {
position: absolute;
top: calc(50% - 6px);
right: 17%;
height: 12px;
cursor: pointer; }
.image-swiper .z-sy3-g4 div:nth-child(1) {
float: left;
margin-right: 5px; }
.image-swiper .z-sy3-g4 div:nth-child(1) img {
height: 100%; }
.image-swiper .z-sy3-g4 div:nth-child(1) img:last-child {
display: none; }
.image-swiper .z-sy3-g4 div:nth-child(2) {
float: left;
font-size: 12px;
line-height: 12px;
color: #807474;
font-weight: lighter; }
.image-swiper .z-sy3-g5 {
position: absolute;
top: calc(50% - 6px);
right: 5%;
height: 12px;
cursor: pointer; }
.image-swiper .z-sy3-g5 div:nth-child(1) {
float: left;
margin-right: 5px; }
.image-swiper .z-sy3-g5 div:nth-child(1) img {
height: 100%; }
.image-swiper .z-sy3-g5 div:nth-child(1) img:last-child {
display: none; }
.image-swiper .z-sy3-g5 div:nth-child(2) {
float: left;
font-size: 12px;
line-height: 12px;
color: #807474;
font-weight: lighter; }
.image-swiper .z-sy3-i1:nth-child(1) .z-sy3-g1 > img {
height: 100%;
width: auto; } }
@media only screen and (max-width: 1439px) and (min-width: 1270px) {
.image-swiper .z-sy3-d1 {
width: 100%;
background: #f4f4f4; }
.image-swiper .z-sy3-d2 {
width: 96.875%;
margin: 0 auto;
margin-bottom: 2.2917%; }
.image-swiper .z-sy3-p1 {
padding: 0 2.043%;
font-size: 14px;
line-height: 40px;
color: #454545;
background: #eeeded;
transition: 0.5s;
margin-right: 4px;
float: left; }
.image-swiper .z-sy3-p1:hover {
color: #fff;
background: #b41700;
transition: 0.5s; }
.image-swiper .z-sy3-p1on {
color: #fff;
background: #b41700;
transition: 0.5s; }
.image-swiper .z-sy3-d3 {
width: 96.875%;
height: 0;
padding-bottom: 47.8125%;
position: relative;
margin: 0 auto; }
.image-swiper .z-sy3-d4 {
display: none; }
.image-swiper .z-sy3-i1 {
position: absolute;
background: #fff;
border: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px; }
.image-swiper .z-sy3-i1:nth-child(1) {
width: 32.26%;
height: 100%;
top: 0;
left: 0;
border-top-left-radius: 0;
border-top-right-radius: 0; }
.image-swiper .z-sy3-i1:nth-child(2) {
width: 32.26%;
height: 48.37%;
top: 0;
left: 33.87%; }
.image-swiper .z-sy3-i1:nth-child(3) {
width: 32.26%;
height: 48.37%;
top: 0;
right: 0; }
.image-swiper .z-sy3-i1:nth-child(4) {
width: 32.26%;
height: 48.37%;
bottom: 0;
left: 33.87%; }
.image-swiper .z-sy3-i1:nth-child(5) {
width: 32.26%;
height: 48.37%;
bottom: 0;
right: 0; }
.image-swiper .z-sy3-g1 {
width: 100%;
height: 83.33%;
position: relative;
background: #d51920; }
.image-swiper .z-sy3-i1:nth-child(1) .z-sy3-g1 {
height: 100%; }
.image-swiper .z-sy3-g1 img {
transition: 0.8s;
opacity: 1;
min-height: 100%; }
.image-swiper .z-sy3-g1:hover img {
transform: scale(1.1);
transition: 0.8s;
opacity: 0.09; }
.image-swiper .z-sy3-g6 {
width: 96px;
height: 96px;
position: absolute;
top: calc(50% - 48px);
left: calc(50% - 48px);
transition: 0.5s; }
.image-swiper .z-sy3-g6:hover {
transform: rotate(360deg);
transition: 0.5s; }
.image-swiper .z-sy3-g6 > div:nth-child(1) {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: -360px;
transition: 0.5s;
box-sizing: border-box;
border: 2px solid #fff;
border-right: 2px solid transparent;
border-radius: 50%;
transform: rotate(-45deg);
opacity: 0; }
.image-swiper .z-sy3-g6 > div:nth-child(2) {
width: 8px;
height: 8px;
border: 0;
border-radius: 50%;
background: #fff;
position: absolute;
top: -180px;
right: 16px;
transition: 0.5s;
opacity: 0; }
.image-swiper .z-sy3-g6 > div:nth-child(3) {
width: 8px;
height: 8px;
border: 0;
border-radius: 50%;
background: #fff;
position: absolute;
top: -180px;
right: 3px;
transition: 0.5s;
opacity: 0; }
.image-swiper .z-sy3-g6 > div:nth-child(4) {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy3-g6 > div:nth-child(4) b {
display: block;
position: absolute;
background: #fff;
transition: 0.5s; }
.image-swiper .z-sy3-g6 > div:nth-child(4) b:nth-child(1) {
width: 1px;
height: 40px;
top: calc(100% + 180px);
left: calc(50% - 1px);
opacity: 0; }
.image-swiper .z-sy3-g6 > div:nth-child(4) b:nth-child(2) {
width: 40px;
height: 1px;
top: calc(50% - 1px);
left: calc(100% + 360px);
opacity: 0; }
.image-swiper .z-sy3-g1:hover .z-sy3-g6 > div:nth-child(1) {
left: 0;
transition: 0.5s;
opacity: 1; }
.image-swiper .z-sy3-g1:hover .z-sy3-g6 > div:nth-child(2) {
top: 10px;
transition: 0.5s;
opacity: 1; }
.image-swiper .z-sy3-g1:hover .z-sy3-g6 > div:nth-child(3) {
top: 26px;
transition: 0.5s;
opacity: 1; }
.image-swiper .z-sy3-g1:hover .z-sy3-g6 > div:nth-child(4) b:nth-child(1) {
top: calc(50% - 20px);
opacity: 1;
transition: 0.5s; }
.image-swiper .z-sy3-g1:hover .z-sy3-g6 > div:nth-child(4) b:nth-child(2) {
left: calc(50% - 20px);
opacity: 1;
transition: 0.5s; }
.image-swiper .z-sy3-g2 {
width: 100%;
height: calc(100% - 83.33%);
background: #fff;
position: relative;
overflow: hidden; }
.image-swiper .z-sy3-i1:nth-child(1) .z-sy3-g2 {
display: none; }
.image-swiper .z-sy3-g3 {
width: 50%;
font-size: 14px;
line-height: 20px;
color: #333333;
font-weight: lighter;
position: absolute;
top: calc(50% - 10px);
left: 5%; }
.image-swiper .z-sy3-g4 {
position: absolute;
top: calc(50% - 6px);
right: 20%;
height: 12px;
cursor: pointer; }
.image-swiper .z-sy3-g4 div:nth-child(1) {
float: left;
margin-right: 5px; }
.image-swiper .z-sy3-g4 div:nth-child(1) img {
height: 100%; }
.image-swiper .z-sy3-g4 div:nth-child(1) img:last-child {
display: none; }
.image-swiper .z-sy3-g4 div:nth-child(2) {
float: left;
font-size: 12px;
line-height: 12px;
color: #807474;
font-weight: lighter; }
.image-swiper .z-sy3-g5 {
position: absolute;
top: calc(50% - 6px);
right: 5%;
height: 12px;
cursor: pointer; }
.image-swiper .z-sy3-g5 div:nth-child(1) {
float: left;
margin-right: 5px; }
.image-swiper .z-sy3-g5 div:nth-child(1) img {
height: 100%; }
.image-swiper .z-sy3-g5 div:nth-child(1) img:last-child {
display: none; }
.image-swiper .z-sy3-g5 div:nth-child(2) {
float: left;
font-size: 12px;
line-height: 12px;
color: #807474;
font-weight: lighter; }
.image-swiper .z-sy3-i1:nth-child(1) .z-sy3-g1 > img {
height: 100%;
width: auto; } }
@media only screen and (max-width: 1269px) and (min-width: 1024px) {
.image-swiper .z-sy3-d1 {
width: 100%;
background: #f4f4f4; }
.image-swiper .z-sy3-d2 {
width: 96.875%;
margin: 0 auto;
margin-bottom: 2.2917%; }
.image-swiper .z-sy3-p1 {
padding: 0 2.043%;
font-size: 12px;
line-height: 35px;
color: #454545;
background: #eeeded;
transition: 0.5s;
margin-right: 4px;
float: left; }
.image-swiper .z-sy3-p1:active {
color: #fff;
background: #b41700;
transition: 0.5s; }
.image-swiper .z-sy3-p1on {
color: #fff;
background: #b41700;
transition: 0.5s; }
.image-swiper .z-sy3-d3 {
width: 96.875%;
height: 0;
padding-bottom: 47.8125%;
position: relative;
margin: 0 auto; }
.image-swiper .z-sy3-d4 {
display: none; }
.image-swiper .z-sy3-i1 {
position: absolute;
background: #fff;
border: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px; }
.image-swiper .z-sy3-i1:nth-child(1) {
width: 32.26%;
height: 100%;
top: 0;
left: 0;
border-top-left-radius: 0;
border-top-right-radius: 0; }
.image-swiper .z-sy3-i1:nth-child(2) {
width: 32.26%;
height: 48.37%;
top: 0;
left: 33.87%; }
.image-swiper .z-sy3-i1:nth-child(3) {
width: 32.26%;
height: 48.37%;
top: 0;
right: 0; }
.image-swiper .z-sy3-i1:nth-child(4) {
width: 32.26%;
height: 48.37%;
bottom: 0;
left: 33.87%; }
.image-swiper .z-sy3-i1:nth-child(5) {
width: 32.26%;
height: 48.37%;
bottom: 0;
right: 0; }
.image-swiper .z-sy3-g1 {
width: 100%;
height: 83.33%;
position: relative;
background: #d51920; }
.image-swiper .z-sy3-i1:nth-child(1) .z-sy3-g1 {
height: 100%; }
.image-swiper .z-sy3-g1 img {
transition: 0.8s;
opacity: 1;
min-height: 100%; }
.image-swiper .z-sy3-g1:hover img {
transform: scale(1.1);
transition: 0.8s;
opacity: 0.09; }
.image-swiper .z-sy3-g6 {
width: 96px;
height: 96px;
position: absolute;
top: calc(50% - 48px);
left: calc(50% - 48px);
transition: 0.5s; }
.image-swiper .z-sy3-g6:active {
transform: rotate(360deg);
transition: 0.5s; }
.image-swiper .z-sy3-g6 > div:nth-child(1) {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: -360px;
transition: 0.5s;
box-sizing: border-box;
border: 2px solid #fff;
border-right: 2px solid transparent;
border-radius: 50%;
transform: rotate(-45deg);
opacity: 0; }
.image-swiper .z-sy3-g6 > div:nth-child(2) {
width: 8px;
height: 8px;
border: 0;
border-radius: 50%;
background: #fff;
position: absolute;
top: -180px;
right: 16px;
transition: 0.5s;
opacity: 0; }
.image-swiper .z-sy3-g6 > div:nth-child(3) {
width: 8px;
height: 8px;
border: 0;
border-radius: 50%;
background: #fff;
position: absolute;
top: -180px;
right: 3px;
transition: 0.5s;
opacity: 0; }
.image-swiper .z-sy3-g6 > div:nth-child(4) {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy3-g6 > div:nth-child(4) b {
display: block;
position: absolute;
background: #fff;
transition: 0.5s; }
.image-swiper .z-sy3-g6 > div:nth-child(4) b:nth-child(1) {
width: 1px;
height: 40px;
top: calc(100% + 180px);
left: calc(50% - 1px);
opacity: 0; }
.image-swiper .z-sy3-g6 > div:nth-child(4) b:nth-child(2) {
width: 40px;
height: 1px;
top: calc(50% - 1px);
left: calc(100% + 360px);
opacity: 0; }
.image-swiper .z-sy3-g1:hover .z-sy3-g6 > div:nth-child(1) {
left: 0;
transition: 0.5s;
opacity: 1; }
.image-swiper .z-sy3-g1:hover .z-sy3-g6 > div:nth-child(2) {
top: 10px;
transition: 0.5s;
opacity: 1; }
.image-swiper .z-sy3-g1:hover .z-sy3-g6 > div:nth-child(3) {
top: 26px;
transition: 0.5s;
opacity: 1; }
.image-swiper .z-sy3-g1:hover .z-sy3-g6 > div:nth-child(4) b:nth-child(1) {
top: calc(50% - 20px);
opacity: 1;
transition: 0.5s; }
.image-swiper .z-sy3-g1:hover .z-sy3-g6 > div:nth-child(4) b:nth-child(2) {
left: calc(50% - 20px);
opacity: 1;
transition: 0.5s; }
.image-swiper .z-sy3-g2 {
width: 100%;
height: calc(100% - 83.33%);
background: #fff;
position: relative;
overflow: hidden; }
.image-swiper .z-sy3-i1:nth-child(1) .z-sy3-g2 {
display: none; }
.image-swiper .z-sy3-g3 {
width: 50%;
font-size: 12px;
line-height: 20px;
color: #333333;
font-weight: lighter;
position: absolute;
top: calc(50% - 10px);
left: 5%; }
.image-swiper .z-sy3-g4 {
position: absolute;
top: calc(50% - 6px);
right: 22%;
height: 12px;
cursor: pointer; }
.image-swiper .z-sy3-g4 div:nth-child(1) {
float: left;
margin-right: 5px; }
.image-swiper .z-sy3-g4 div:nth-child(1) img {
height: 100%; }
.image-swiper .z-sy3-g4 div:nth-child(1) img:last-child {
display: none; }
.image-swiper .z-sy3-g4 div:nth-child(2) {
float: left;
font-size: 12px;
line-height: 12px;
color: #807474;
font-weight: lighter; }
.image-swiper .z-sy3-g5 {
position: absolute;
top: calc(50% - 6px);
right: 5%;
height: 12px;
cursor: pointer; }
.image-swiper .z-sy3-g5 div:nth-child(1) {
float: left;
margin-right: 5px; }
.image-swiper .z-sy3-g5 div:nth-child(1) img {
height: 100%; }
.image-swiper .z-sy3-g5 div:nth-child(1) img:last-child {
display: none; }
.image-swiper .z-sy3-g5 div:nth-child(2) {
float: left;
font-size: 12px;
line-height: 12px;
color: #807474;
font-weight: lighter; }
.image-swiper .z-sy3-i1:nth-child(1) .z-sy3-g1 > img {
height: 100%;
width: auto; } }
@media only screen and (max-width: 1023px) {
.image-swiper .z-sy3-d1 {
width: 100%;
background: #f4f4f4; }
.image-swiper .z-sy3-d2 {
display: none; }
.image-swiper .z-sy3-d4 {
width: 100%;
height: 0.9rem;
background: #fff;
position: relative;
overflow: hidden;
overflow-x: scroll;
margin-bottom: 0.24rem; }
.image-swiper .z-sy3-d5 {
height: 0.9rem;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy3-p1 {
padding: 0 0.24rem;
font-size: 0.26rem;
line-height: 0.9rem;
color: #454545;
float: left; }
.image-swiper .z-sy3-p1on {
color: #fff;
background: #b41700; }
.image-swiper .z-sy3-d3 {
width: 100%;
position: relative; }
.image-swiper .z-sy3-i1 {
position: relative;
background: #fff;
border: 0;
border-top-left-radius: 0.1rem;
border-top-right-radius: 0.1rem; }
.image-swiper .z-sy3-i1:nth-child(1) {
width: calc(50% - 0.12rem);
height: 5.96rem;
float: left;
margin-bottom: 0.21rem; }
.image-swiper .z-sy3-i1:nth-child(2) {
width: calc(50% - 0.12rem);
height: 2.9rem;
float: right;
margin-bottom: 0.16rem; }
.image-swiper .z-sy3-i1:nth-child(3) {
width: calc(50% - 0.12rem);
height: 2.9rem;
float: right;
margin-bottom: 0.22rem; }
.image-swiper .z-sy3-i1:nth-child(4) {
width: calc(50% - 0.12rem);
height: 2.9rem;
float: left; }
.image-swiper .z-sy3-i1:nth-child(5) {
width: calc(50% - 0.12rem);
height: 2.9rem;
float: right; }
.image-swiper .z-sy3-g1 {
width: 100%;
height: 2.24rem;
position: relative;
background: #d51920; }
.image-swiper .z-sy3-i1:nth-child(1) .z-sy3-g1 {
height: 100%; }
.image-swiper .z-sy3-g1 img {
opacity: 1;
min-height: 100%; }
.image-swiper .z-sy3-g1 a {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: block; }
.image-swiper .z-sy3-g6 {
display: none; }
.image-swiper .z-sy3-g2 {
width: 100%;
height: calc(100% - 2.24rem);
background: #fff;
position: relative;
overflow: hidden; }
.image-swiper .z-sy3-i1:nth-child(1) .z-sy3-g2 {
display: none; }
.image-swiper .z-sy3-g3 {
width: 40%;
font-size: 0.2rem;
line-height: 0.26rem;
color: #333333;
font-weight: lighter;
position: absolute;
top: calc(50% - 0.24rem);
left: 0.12rem; }
.image-swiper .z-sy3-g4 {
position: absolute;
top: calc(50% - 0.11rem);
right: 0.96rem;
height: 0.22rem;
cursor: pointer; }
.image-swiper .z-sy3-g4 div:nth-child(1) {
float: left;
margin-right: 0.05rem;
height: 0.15rem;
padding-top: 0.03rem; }
.image-swiper .z-sy3-g4 div:nth-child(1) img {
height: 100%; }
.image-swiper .z-sy3-g4 div:nth-child(1) img:last-child {
display: none; }
.image-swiper .z-sy3-g4 div:nth-child(2) {
float: left;
font-size: 0.22rem;
line-height: 0.22rem;
color: #807474;
font-weight: lighter; }
.image-swiper .z-sy3-g5 {
position: absolute;
top: calc(50% - 0.11rem);
right: 0.1rem;
height: 0.22rem;
cursor: pointer; }
.image-swiper .z-sy3-g5 div:nth-child(1) {
float: left;
margin-right: 0.05rem;
height: 0.15rem;
padding-top: 0.03rem; }
.image-swiper .z-sy3-g5 div:nth-child(1) img {
height: 100%; }
.image-swiper .z-sy3-g5 div:nth-child(1) img:last-child {
display: none; }
.image-swiper .z-sy3-g5 div:nth-child(2) {
float: left;
font-size: 0.22rem;
line-height: 0.22rem;
color: #807474;
font-weight: lighter; }
.image-swiper .z-sy3-i1:nth-child(1) .z-sy3-g1 > img {
height: 100%;
width: auto; } }
@media only screen and (min-width: 1440px) {
.image-swiper .z-sy4-d1 {
width: 100%;
padding-bottom: 6.8021%;
position: relative; }
.image-swiper .z-sy4-d2 {
width: 50.78125%;
position: relative;
height: 0;
padding-bottom: 28.8021%; }
.image-swiper .z-sy4-d2 video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy4-d3 {
width: 51.0417%;
height: 0;
padding-bottom: 22.8125%;
position: absolute;
bottom: 0;
right: 0;
background: #d51920; }
.image-swiper .z-sy4-l1 {
width: 88.9796%;
height: 63.9269%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto; }
.image-swiper .z-sy4-l1 > b {
background: rgba(255, 255, 255, 0.3);
display: block;
position: absolute; }
.image-swiper .z-sy4-l1 > b:nth-child(1) {
width: 100%;
height: 1px;
top: 50%;
left: 0; }
.image-swiper .z-sy4-l1 > b:nth-child(2) {
width: 1px;
height: 100%;
top: 0;
left: 33.3333%; }
.image-swiper .z-sy4-l1 > b:nth-child(3) {
width: 1px;
height: 100%;
top: 0;
left: 66.6667%; }
.image-swiper .z-sy4-d4 {
width: 88.9796%;
height: 63.9269%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto; }
.image-swiper .z-sy4-d5 {
width: 33.3333%;
height: 50%;
position: relative;
float: left; }
.image-swiper .z-sy4-d6 {
width: 100%;
position: absolute;
left: 0; }
.image-swiper .z-sy4-d5:nth-child(1) .z-sy4-d6, .image-swiper .z-sy4-d5:nth-child(2) .z-sy4-d6, .image-swiper .z-sy4-d5:nth-child(3) .z-sy4-d6 {
top: 0; }
.image-swiper .z-sy4-d5:nth-child(4) .z-sy4-d6, .image-swiper .z-sy4-d5:nth-child(5) .z-sy4-d6, .image-swiper .z-sy4-d5:nth-child(6) .z-sy4-d6 {
bottom: 0; }
.image-swiper .z-sy4-p1 {
width: 100%;
text-align: center;
margin-bottom: 10px; }
.image-swiper .z-sy4-p1 span:first-child {
font-size: 72px;
line-height: 72px;
color: #fff;
font-family: "din"; }
.image-swiper .z-sy4-p1 span:last-child {
font-size: 16px;
line-height: 16px;
color: #fff;
position: relative;
top: -40px; }
.image-swiper .z-sy4-p2 {
width: 100%;
font-size: 16px;
line-height: 16px;
color: #fff;
text-align: center; }
.image-swiper .z-sy4-p3 {
font-size: 26px;
line-height: 26px;
color: #454545;
position: absolute;
top: 20.4719%;
left: 53.3854%; }
.image-swiper .z-sy4-p4 {
font-size: 16px;
line-height: 32px;
color: #454545;
position: absolute;
top: 26.3399%;
left: 53.3854%;
width: 42.9271%; }
.image-swiper .z-sy4-bt2 {
width: 158px;
height: 50px;
border: 1px solid #d51920;
border-radius: 25px;
box-sizing: border-box;
transition: 0.5s;
position: absolute;
bottom: 51.8007%;
right: 4.6875%;
font-size: 16px;
line-height: 48px;
color: #d51920;
text-align: center; }
.image-swiper .z-sy4-bt2:hover {
color: #fff;
background: #d51920;
transition: 0.5s; }
.image-swiper .z-sy4-d7 {
display: none; }
.image-swiper .z-sy4-z1 {
display: none; } }
@media only screen and (max-width: 1439px) and (min-width: 1270px) {
.image-swiper .z-sy4-d1 {
width: 100%;
padding-bottom: 6.8021%;
position: relative; }
.image-swiper .z-sy4-d2 {
width: 50.78125%;
position: relative;
height: 0;
padding-bottom: 28.8021%; }
.image-swiper .z-sy4-d2 video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy4-d3 {
width: 51.0417%;
height: 0;
padding-bottom: 22.8125%;
position: absolute;
bottom: 0;
right: 0;
background: #d51920; }
.image-swiper .z-sy4-l1 {
width: 88.9796%;
height: 63.9269%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto; }
.image-swiper .z-sy4-l1 > b {
background: rgba(255, 255, 255, 0.3);
display: block;
position: absolute; }
.image-swiper .z-sy4-l1 > b:nth-child(1) {
width: 100%;
height: 1px;
top: 50%;
left: 0; }
.image-swiper .z-sy4-l1 > b:nth-child(2) {
width: 1px;
height: 100%;
top: 0;
left: 33.3333%; }
.image-swiper .z-sy4-l1 > b:nth-child(3) {
width: 1px;
height: 100%;
top: 0;
left: 66.6667%; }
.image-swiper .z-sy4-d4 {
width: 88.9796%;
height: 63.9269%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto; }
.image-swiper .z-sy4-d5 {
width: 33.3333%;
height: 50%;
position: relative;
float: left; }
.image-swiper .z-sy4-d6 {
width: 100%;
position: absolute;
left: 0; }
.image-swiper .z-sy4-d5:nth-child(1) .z-sy4-d6, .image-swiper .z-sy4-d5:nth-child(2) .z-sy4-d6, .image-swiper .z-sy4-d5:nth-child(3) .z-sy4-d6 {
top: 0; }
.image-swiper .z-sy4-d5:nth-child(4) .z-sy4-d6, .image-swiper .z-sy4-d5:nth-child(5) .z-sy4-d6, .image-swiper .z-sy4-d5:nth-child(6) .z-sy4-d6 {
bottom: 0; }
.image-swiper .z-sy4-p1 {
width: 100%;
text-align: center;
margin-bottom: 10px; }
.image-swiper .z-sy4-p1 span:first-child {
font-size: 60px;
line-height: 60px;
color: #fff;
font-family: "din"; }
.image-swiper .z-sy4-p1 span:last-child {
font-size: 14px;
line-height: 14px;
color: #fff;
position: relative;
top: -32px; }
.image-swiper .z-sy4-p2 {
width: 100%;
font-size: 14px;
line-height: 14px;
color: #fff;
text-align: center; }
.image-swiper .z-sy4-p3 {
font-size: 22px;
line-height: 22px;
color: #454545;
position: absolute;
top: 20.4719%;
left: 53.3854%; }
.image-swiper .z-sy4-p4 {
font-size: 14px;
line-height: 28px;
color: #454545;
position: absolute;
top: 26.3399%;
left: 53.3854%;
width: 42.9271%; }
.image-swiper .z-sy4-bt2 {
width: 120px;
height: 40px;
border: 1px solid #d51920;
border-radius: 20px;
box-sizing: border-box;
transition: 0.5s;
position: absolute;
bottom: 51.8007%;
right: 4.6875%;
font-size: 14px;
line-height: 38px;
color: #d51920;
text-align: center; }
.image-swiper .z-sy4-bt2:hover {
color: #fff;
background: #d51920;
transition: 0.5s; }
.image-swiper .z-sy4-d7 {
display: none; }
.image-swiper .z-sy4-z1 {
display: none; } }
@media only screen and (max-width: 1269px) and (min-width: 1024px) {
.image-swiper .z-sy4-d1 {
width: 100%;
padding-bottom: 6.8021%;
position: relative; }
.image-swiper .z-sy4-d2 {
width: 50.78125%;
position: relative;
height: 0;
padding-bottom: 28.8021%; }
.image-swiper .z-sy4-d2 video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy4-d3 {
width: 51.0417%;
height: 0;
padding-bottom: 22.8125%;
position: absolute;
bottom: 0;
right: 0;
background: #d51920; }
.image-swiper .z-sy4-l1 {
width: 88.9796%;
height: 63.9269%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto; }
.image-swiper .z-sy4-l1 > b {
background: rgba(255, 255, 255, 0.3);
display: block;
position: absolute; }
.image-swiper .z-sy4-l1 > b:nth-child(1) {
width: 100%;
height: 1px;
top: 50%;
left: 0; }
.image-swiper .z-sy4-l1 > b:nth-child(2) {
width: 1px;
height: 100%;
top: 0;
left: 33.3333%; }
.image-swiper .z-sy4-l1 > b:nth-child(3) {
width: 1px;
height: 100%;
top: 0;
left: 66.6667%; }
.image-swiper .z-sy4-d4 {
width: 88.9796%;
height: 63.9269%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto; }
.image-swiper .z-sy4-d5 {
width: 33.3333%;
height: 50%;
position: relative;
float: left; }
.image-swiper .z-sy4-d6 {
width: 100%;
position: absolute;
left: 0; }
.image-swiper .z-sy4-d5:nth-child(1) .z-sy4-d6, .image-swiper .z-sy4-d5:nth-child(2) .z-sy4-d6, .image-swiper .z-sy4-d5:nth-child(3) .z-sy4-d6 {
top: 0; }
.image-swiper .z-sy4-d5:nth-child(4) .z-sy4-d6, .image-swiper .z-sy4-d5:nth-child(5) .z-sy4-d6, .image-swiper .z-sy4-d5:nth-child(6) .z-sy4-d6 {
bottom: 0; }
.image-swiper .z-sy4-p1 {
width: 100%;
text-align: center;
margin-bottom: 6px; }
.image-swiper .z-sy4-p1 span:first-child {
font-size: 48px;
line-height: 48px;
color: #fff;
font-family: "din"; }
.image-swiper .z-sy4-p1 span:last-child {
font-size: 12px;
line-height: 12px;
color: #fff;
position: relative;
top: -24px; }
.image-swiper .z-sy4-p2 {
width: 100%;
font-size: 12px;
line-height: 12px;
color: #fff;
text-align: center; }
.image-swiper .z-sy4-p3 {
font-size: 18px;
line-height: 18px;
color: #454545;
position: absolute;
top: 20.4719%;
left: 53.3854%; }
.image-swiper .z-sy4-p4 {
font-size: 12px;
line-height: 24px;
color: #454545;
position: absolute;
top: 26.3399%;
left: 53.3854%;
width: 42.9271%; }
.image-swiper .z-sy4-bt2 {
width: 90px;
height: 30px;
border: 1px solid #d51920;
border-radius: 15px;
box-sizing: border-box;
transition: 0.5s;
position: absolute;
bottom: 51.8007%;
right: 4.6875%;
font-size: 12px;
line-height: 28px;
color: #d51920;
text-align: center; }
.image-swiper .z-sy4-bt2:active {
color: #fff;
background: #d51920;
transition: 0.5s; }
.image-swiper .z-sy4-d7 {
display: none; }
.image-swiper .z-sy4-z1 {
display: none; } }
@media only screen and (max-width: 1023px) {
.image-swiper .z-sy4-d1 {
width: 100%;
position: relative;
background: #fff;
padding-bottom: 0.38rem; }
.image-swiper .z-sy4-d2 {
width: 100%;
position: relative; }
.image-swiper .z-sy4-d2 video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none; }
.image-swiper .z-sy4-d3 {
width: 100%;
height: 3.62rem;
position: relative;
background: #d51920;
margin-bottom: 0.34rem; }
.image-swiper .z-sy4-l1 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy4-l1 > b {
background: rgba(255, 255, 255, 0.3);
display: block;
position: absolute; }
.image-swiper .z-sy4-l1 > b:nth-child(1) {
width: 100%;
height: 1px;
top: 50%;
left: 0; }
.image-swiper .z-sy4-l1 > b:nth-child(2) {
width: 1px;
height: 100%;
top: 0;
left: 33.3333%; }
.image-swiper .z-sy4-l1 > b:nth-child(3) {
width: 1px;
height: 100%;
top: 0;
left: 66.6667%; }
.image-swiper .z-sy4-d4 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy4-d5 {
width: 33.3333%;
height: 50%;
position: relative;
float: left; }
.image-swiper .z-sy4-d6 {
width: 100%;
position: absolute;
left: 0;
top: 0.3rem; }
.image-swiper .z-sy4-p1 {
width: 100%;
text-align: center;
margin-bottom: 0.1rem; }
.image-swiper .z-sy4-p1 span:first-child {
font-size: 0.68rem;
line-height: 0.68rem;
color: #fff;
font-family: "din"; }
.image-swiper .z-sy4-p1 span:last-child {
font-size: 0.22rem;
line-height: 0.22rem;
color: #fff;
position: relative;
top: -0.3rem; }
.image-swiper .z-sy4-p2 {
width: calc(100% - 0.48rem);
font-size: 0.22rem;
line-height: 0.3rem;
color: #fff;
text-align: center;
margin: 0 auto; }
.image-swiper .z-sy4-p3 {
font-size: 0.32rem;
line-height: 0.34rem;
color: #454545;
position: relative;
width: calc(100% - 0.48rem);
margin: 0 auto;
margin-bottom: 0.26rem; }
.image-swiper .z-sy4-p4 {
font-size: 0.24rem;
line-height: 0.36rem;
color: #454545;
position: relative;
width: calc(100% - 0.48rem);
margin: 0 auto;
margin-bottom: 0.34rem; }
.image-swiper .z-sy4-bt2 {
width: 2.2rem;
height: 0.72rem;
border: 1px solid #d51920;
border-radius: 0.36rem;
box-sizing: border-box;
position: relative;
margin: 0 auto;
font-size: 0.26rem;
line-height: 0.7rem;
color: #d51920;
text-align: center; }
.image-swiper .z-sy4-d7 {
width: 100%;
height: 4.26rem;
overflow: hidden;
position: relative; }
.image-swiper .z-sy4-d7 > img {
width: 100%;
height: 100%;
position: relative; }
.image-swiper .z-sy4-k1 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8); }
.image-swiper .z-sy4-bt1 {
width: 0.8rem;
height: 0.8rem;
position: absolute;
top: calc(50% - 0.4rem);
left: calc(50% - 0.4rem); }
.image-swiper .z-sy4-bt1 img {
width: 100%;
height: 100%; }
.image-swiper .z-sy4-z1 {
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
z-index: 240; }
.image-swiper .z-sy4-z1 video {
width: calc(100% - 0.48rem);
height: 4rem;
position: absolute;
top: calc(50% - 2rem);
left: 0.24rem; }
.image-swiper .z-sy4-bt3 {
width: 0.5rem;
height: 0.5rem;
border: 2px solid #fff;
border-radius: 50%;
position: absolute;
top: calc(50% - 3rem);
right: 0.24rem;
transform: rotate(45deg);
cursor: pointer; }
.image-swiper .z-sy4-bt3 b {
display: block;
background: #fff;
position: absolute; }
.image-swiper .z-sy4-bt3 b:nth-child(1) {
width: 0.4rem;
height: 2px;
top: calc(50% - 1px);
left: calc(50% - 0.2rem); }
.image-swiper .z-sy4-bt3 b:nth-child(2) {
width: 2px;
height: 0.4rem;
top: calc(50% - 0.2rem);
left: calc(50% - 1px); } }
@media only screen and (min-width: 1440px) {
.image-swiper .z-sy5-d1 {
width: 100%; }
.image-swiper .z-sy5-d2 {
width: 99.375%;
height: 0;
padding-bottom: 31.25%;
position: relative;
margin: 0 auto; }
.image-swiper .z-sy5-d3 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy5-d4 {
width: 25%;
height: 100%;
position: relative;
float: left;
background: #fff;
overflow: hidden; }
.image-swiper .z-sy5-k1 {
width: 100%;
height: 100%;
position: absolute;
bottom: 100%;
left: 0;
transition: 0.5s;
background: #d51920;
opacity: 0; }
.image-swiper .z-sy5-d4:hover .z-sy5-k1 {
transition: 0.5s;
opacity: 1;
bottom: 0; }
.image-swiper .z-sy5-p1 {
font-size: 14px;
line-height: 14px;
color: #737373;
position: absolute;
top: 9%;
left: calc((100% - 81.76%) / 2);
transition: 0.5s;
font-weight: lighter; }
.image-swiper .z-sy5-d4:hover .z-sy5-p1 {
color: #fff;
transition: 0.5s; }
.image-swiper .z-sy5-p2 {
font-size: 20px;
width: 81%;
line-height: 30px;
color: #333333;
position: absolute;
top: 7.5%;
left: calc((100% - 81.76%) / 2);
transition: 0.5s; }
.image-swiper .z-sy5-d4:hover .z-sy5-p2 {
color: #fff;
transition: 0.5s; }
.image-swiper .z-sy5-l1 {
width: 28px;
height: 3px;
background: #333333;
position: absolute;
top: 22%;
left: calc((100% - 81.76%) / 2);
transition: 0.5s; }
.image-swiper .z-sy5-d4:hover .z-sy5-l1 {
background: #fff;
transition: 0.5s; }
.image-swiper .z-sy5-i1 {
width: 81.76%;
height: 32%;
position: absolute;
top: 27.66%;
left: calc((100% - 81.76%) / 2);
overflow: hidden; }
.image-swiper .z-sy5-i1 img {
width: 100%;
min-height: 100%;
transition: 0.5s; }
.image-swiper .z-sy5-i1:hover img {
transform: scale(1.1);
transition: 0.5s; }
.image-swiper .z-sy5-p3 {
font-size: 20px;
line-height: 22px;
color: #333333;
font-weight: lighter;
position: absolute;
bottom: 29.33%;
left: calc((100% - 81.76%) / 2);
width: 81.76%;
transition: 0.5s; }
.image-swiper .z-sy5-d4:hover .z-sy5-p3 {
color: #fff;
transition: 0.5s; }
.image-swiper .z-sy5-p4 {
width: 81.76%;
font-size: 16px;
line-height: 24px;
color: #999999;
font-weight: lighter;
position: absolute;
top: 71.66%;
left: calc((100% - 81.76%) / 2);
transition: 0.5s;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical; }
.image-swiper .z-sy5-d4:hover .z-sy5-p4 {
color: #fff;
transition: 0.5s; }
.image-swiper .z-sy5-p5 {
font-size: 16px;
line-height: 16px;
color: #767676;
position: absolute;
bottom: 8.66%;
left: calc((100% - 81.76%) / 2);
transition: 0.5s; }
.image-swiper .z-sy5-d4:hover .z-sy5-p5 {
color: #fff;
transition: 0.5s; }
.image-swiper .z-sy5-l2 {
width: 1px;
height: 100%;
background: #ccc;
transition: 0.5s; }
.image-swiper .z-sy5-d4:first-child .z-sy5-l2 {
display: none; }
.image-swiper .z-sy5-d4:hover .z-sy5-l2 {
background: #d51920;
transition: 0.5s; }
.image-swiper .z-sy5-sp1 {
font-size: 16px; } }
@media only screen and (max-width: 1439px) and (min-width: 1270px) {
.image-swiper .z-sy5-d1 {
width: 100%; }
.image-swiper .z-sy5-d2 {
width: 99.375%;
height: 0;
padding-bottom: 31.25%;
position: relative;
margin: 0 auto; }
.image-swiper .z-sy5-d3 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy5-d4 {
width: 25%;
height: 100%;
position: relative;
float: left;
background: #fff;
overflow: hidden; }
.image-swiper .z-sy5-k1 {
width: 100%;
height: 100%;
position: absolute;
bottom: 100%;
left: 0;
transition: 0.5s;
background: #d51920;
opacity: 0; }
.image-swiper .z-sy5-d4:hover .z-sy5-k1 {
transition: 0.5s;
opacity: 1;
bottom: 0; }
.image-swiper .z-sy5-p1 {
font-size: 12px;
line-height: 12px;
color: #737373;
position: absolute;
top: 9%;
left: calc((100% - 81.76%) / 2);
transition: 0.5s;
font-weight: lighter; }
.image-swiper .z-sy5-d4:hover .z-sy5-p1 {
color: #fff;
transition: 0.5s; }
.image-swiper .z-sy5-p2 {
width: 81%;
font-size: 18px;
line-height: 26px;
color: #333333;
position: absolute;
top: 5.5%;
left: calc((100% - 81.76%) / 2);
transition: 0.5s; }
.image-swiper .z-sy5-d4:hover .z-sy5-p2 {
color: #fff;
transition: 0.5s; }
.image-swiper .z-sy5-l1 {
width: 28px;
height: 3px;
background: #333333;
position: absolute;
top: 22%;
left: calc((100% - 81.76%) / 2);
transition: 0.5s; }
.image-swiper .z-sy5-d4:hover .z-sy5-l1 {
background: #fff;
transition: 0.5s; }
.image-swiper .z-sy5-i1 {
width: 81.76%;
height: 32%;
position: absolute;
top: 27.66%;
left: calc((100% - 81.76%) / 2);
overflow: hidden; }
.image-swiper .z-sy5-i1 img {
width: 100%;
min-height: 100%;
transition: 0.5s; }
.image-swiper .z-sy5-i1:hover img {
transform: scale(1.1);
transition: 0.5s; }
.image-swiper .z-sy5-p3 {
font-size: 18px;
line-height: 20px;
color: #333333;
font-weight: lighter;
position: absolute;
bottom: 29.33%;
left: calc((100% - 81.76%) / 2);
width: 81.76%;
transition: 0.5s; }
.image-swiper .z-sy5-d4:hover .z-sy5-p3 {
color: #fff;
transition: 0.5s; }
.image-swiper .z-sy5-p4 {
width: 81.76%;
font-size: 14px;
line-height: 20px;
color: #999999;
font-weight: lighter;
position: absolute;
top: 71.66%;
left: calc((100% - 81.76%) / 2);
transition: 0.5s;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical; }
.image-swiper .z-sy5-d4:hover .z-sy5-p4 {
color: #fff;
transition: 0.5s; }
.image-swiper .z-sy5-p5 {
font-size: 14px;
line-height: 14px;
color: #767676;
position: absolute;
bottom: 8.66%;
left: calc((100% - 81.76%) / 2);
transition: 0.5s; }
.image-swiper .z-sy5-d4:hover .z-sy5-p5 {
color: #fff;
transition: 0.5s; }
.image-swiper .z-sy5-l2 {
width: 1px;
height: 100%;
background: #ccc;
transition: 0.5s; }
.image-swiper .z-sy5-d4:first-child .z-sy5-l2 {
display: none; }
.image-swiper .z-sy5-d4:hover .z-sy5-l2 {
background: #d51920;
transition: 0.5s; }
.image-swiper .z-sy5-sp1 {
font-size: 16px; } }
@media only screen and (max-width: 1269px) and (min-width: 1024px) {
.image-swiper .z-sy5-d1 {
width: 100%; }
.image-swiper .z-sy5-d2 {
width: 99.375%;
height: 0;
padding-bottom: 31.25%;
position: relative;
margin: 0 auto; }
.image-swiper .z-sy5-d3 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy5-d4 {
width: 25%;
height: 100%;
position: relative;
float: left;
background: #fff;
overflow: hidden; }
.image-swiper .z-sy5-k1 {
width: 100%;
height: 100%;
position: absolute;
bottom: 100%;
left: 0;
transition: 0.5s;
background: #d51920;
opacity: 0; }
.image-swiper .z-sy5-d4:active .z-sy5-k1 {
transition: 0.5s;
opacity: 1;
bottom: 0; }
.image-swiper .z-sy5-p1 {
font-size: 12px;
line-height: 12px;
color: #737373;
position: absolute;
top: 9%;
left: calc((100% - 81.76%) / 2);
transition: 0.5s;
font-weight: lighter; }
.image-swiper .z-sy5-d4:active .z-sy5-p1 {
color: #fff;
transition: 0.5s; }
.image-swiper .z-sy5-p2 {
width: 81%;
font-size: 16px;
line-height: 20px;
color: #333333;
position: absolute;
top: 9%;
left: calc((100% - 81.76%) / 2);
transition: 0.5s; }
.image-swiper .z-sy5-d4:active .z-sy5-p2 {
color: #fff;
transition: 0.5s; }
.image-swiper .z-sy5-l1 {
width: 28px;
height: 3px;
background: #333333;
position: absolute;
top: 22%;
left: calc((100% - 81.76%) / 2);
transition: 0.5s; }
.image-swiper .z-sy5-d4:active .z-sy5-l1 {
background: #fff;
transition: 0.5s; }
.image-swiper .z-sy5-i1 {
width: 81.76%;
height: 32%;
position: absolute;
top: 27.66%;
left: calc((100% - 81.76%) / 2);
overflow: hidden; }
.image-swiper .z-sy5-i1 img {
width: 100%;
min-height: 100%;
transition: 0.5s; }
.image-swiper .z-sy5-i1:active img {
transform: scale(1.1);
transition: 0.5s; }
.image-swiper .z-sy5-p3 {
font-size: 16px;
line-height: 18px;
color: #333333;
font-weight: lighter;
position: absolute;
bottom: 30%;
left: calc((100% - 81.76%) / 2);
width: 81.76%;
transition: 0.5s; }
.image-swiper .z-sy5-d4:active .z-sy5-p3 {
color: #fff;
transition: 0.5s; }
.image-swiper .z-sy5-p4 {
width: 81.76%;
font-size: 12px;
line-height: 18px;
color: #999999;
font-weight: lighter;
position: absolute;
top: 72%;
left: calc((100% - 81.76%) / 2);
transition: 0.5s;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical; }
.image-swiper .z-sy5-d4:active .z-sy5-p4 {
color: #fff;
transition: 0.5s; }
.image-swiper .z-sy5-p5 {
font-size: 12px;
line-height: 12px;
color: #767676;
position: absolute;
bottom: 8.66%;
left: calc((100% - 81.76%) / 2);
transition: 0.5s; }
.image-swiper .z-sy5-d4:active .z-sy5-p5 {
color: #fff;
transition: 0.5s; }
.image-swiper .z-sy5-l2 {
width: 1px;
height: 100%;
background: #ccc;
transition: 0.5s; }
.image-swiper .z-sy5-d4:first-child .z-sy5-l2 {
display: none; }
.image-swiper .z-sy5-d4:active .z-sy5-l2 {
background: #d51920;
transition: 0.5s; }
.image-swiper .z-sy5-sp1 {
font-size: 16px; } }
@media only screen and (max-width: 1023px) {
.image-swiper .z-sy5-d1 {
width: 100%;
background: #f4f4f4; }
.image-swiper .z-sy5-d2 {
width: calc(100% - 0.48rem);
position: relative;
margin: 0 auto; }
.image-swiper .z-sy5-d3 {
width: 100%;
position: relative; }
.image-swiper .z-sy5-d4 {
width: 100%;
height: 6.1rem;
position: relative;
background: #fff;
display: none; }
.image-swiper .z-sy5-d4:nth-child(1) {
display: block;
margin-bottom: 0.24rem; }
.image-swiper .z-sy5-d4:nth-child(2) {
display: block; }
.image-swiper .z-sy5-d4 {
display: none; }
.image-swiper .z-sy5-p1 {
font-size: 0.22rem;
line-height: 0.22rem;
color: #737373;
position: absolute;
top: 0.24rem;
left: 0.3rem;
font-weight: lighter; }
.image-swiper .z-sy5-p2 {
width: 90%;
font-size: 0.3rem;
line-height: 0.32rem;
color: #333333;
position: absolute;
top: 0.45rem;
left: 0.3rem;
height: 0.64rem; }
.image-swiper .z-sy5-l1 {
width: 0.46rem;
height: 3px;
background: #333333;
position: absolute;
top: 1.18rem;
left: 0.3rem; }
.image-swiper .z-sy5-i1 {
width: calc(100% - 0.6rem);
height: 3.17rem;
position: absolute;
top: 27.66%;
left: 0.3rem;
overflow: hidden; }
.image-swiper .z-sy5-i1 img {
width: 100%;
min-height: 100%; }
.image-swiper .z-sy5-p3 {
font-size: 0.3rem;
line-height: 0.32rem;
color: #333333;
font-weight: lighter;
position: absolute;
bottom: 0.72rem;
left: 0.3rem;
width: calc(100% - 0.6rem); }
.image-swiper .z-sy5-p4 {
width: 90%;
font-size: 0.24rem;
line-height: 0.28rem;
color: #999999;
font-weight: lighter;
position: absolute;
top: 5.4rem;
left: 0.3rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; }
.image-swiper .z-sy5-p5 {
display: none; }
.image-swiper .z-sy5-l2 {
display: none; }
.image-swiper .z-sy5-d4 > a {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: block; }
.image-swiper .z-sy5-sp1 {
font-size: 0.16rem; } }
@media only screen and (min-width: 1440px) {
.image-swiper {
/*.z-sy6-o1:nth-child(1){top: calc(15.56% - 6px);right: calc(4.64% - 6px);}
.z-sy6-o1:nth-child(2){top: calc(22.88% - 6px);right: calc(11.65% - 6px);}
.z-sy6-o1:nth-child(3){top: calc(30.72% - 6px);right: calc(14.46% - 6px);}
.z-sy6-o1:nth-child(4){top: calc(33.86% - 6px);right: calc(23.092% - 6px);}
.z-sy6-o1:nth-child(5){top: calc(36.47% - 6px);right: calc(37.54% - 6px);}
.z-sy6-o1:nth-child(6){top: calc(40.78% - 6px);right: calc(22.11% - 6px);}
.z-sy6-o1:nth-child(7){top: calc(44.97% - 6px);right: calc(31.82% - 6px);}
.z-sy6-o1:nth-child(8){top: calc(48.5% - 6px);right: calc(22.11% - 6px);}
.z-sy6-o1:nth-child(9){top: calc(56.47% - 6px);right: calc(38.51% - 6px);}
.z-sy6-o1:nth-child(10){top: calc(60.39% - 6px);right: calc(15.1% - 6px);}
.z-sy6-o1:nth-child(11){top: calc(70.22% - 6px);right: calc(24.81% - 6px);}
.z-sy6-o1:nth-child(12){top: calc(75.82% - 6px);right: calc(18.77% - 6px);}
.z-sy6-o1:nth-child(13){top: calc(81.83% - 6px);right: calc(26.97% - 6px);}
.z-sy6-o1:nth-child(14){top: calc(88.1% - 6px);right: calc(25.57% - 6px);}*/ }
.image-swiper .z-sy6-d1 {
width: 100%; }
.image-swiper .z-sy6-d2 {
width: 100%;
position: relative; }
.image-swiper .z-sy6-d2 > img {
width: 100%;
position: relative; }
.image-swiper .z-sy6-i1 {
width: 48.6979%;
position: absolute;
top: 5.24%;
left: 3.75%; }
.image-swiper .z-sy6-i1 > img {
width: 100%;
position: relative; }
.image-swiper .z-sy6-d3 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy6-o1 {
width: 10px;
height: 10px;
background: #fff;
border: 0;
border-radius: 50%;
position: absolute;
cursor: pointer; }
.image-swiper .z-sy6-o2 {
width: 100%;
height: 100%;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
animation: circle1 2s linear infinite; }
@keyframes circle1 {
0% {
transform: scale(1);
opacity: 1; }
100% {
transform: scale(3);
opacity: 0; } }
.image-swiper .z-sy6-o3 {
width: 100%;
height: 100%;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
animation: circle2 2s linear infinite;
display: none;
position: absolute;
top: 0;
left: 0; }
@keyframes circle2 {
0% {
transform: scale(3);
opacity: 1; }
100% {
transform: scale(5);
opacity: 0; } }
.image-swiper .z-sy6-o1:hover .z-sy6-o3 {
display: block; }
.image-swiper .z-sy6-p1 {
font-size: 12px;
line-height: 12px;
color: #fff;
white-space: nowrap;
position: absolute;
top: -6px;
left: 32px; }
.image-swiper .z-sy6-p2 {
position: absolute;
top: 15.14%;
right: 8.64%;
font-size: 65px;
line-height: 90px;
color: #fff;
font-weight: bold;
text-align: right; }
.image-swiper .z-sy6-p2 span {
color: #d51920; }
.image-swiper .z-sy6-l1 {
width: 250px;
height: 1px;
background: #fff;
position: absolute;
top: 58.89%;
right: 8.64%; }
.image-swiper .z-sy6-p3 {
font-size: 20px;
line-height: 50px;
color: #fff;
font-weight: bold;
position: absolute;
top: 61.3%;
right: 8.64%;
text-align: right; } }
@media only screen and (max-width: 1439px) and (min-width: 1270px) {
.image-swiper {
/*.z-sy6-o1:nth-child(1){top: calc(15.56% - 6px);right: calc(4.64% - 6px);}
.z-sy6-o1:nth-child(2){top: calc(22.88% - 6px);right: calc(11.65% - 6px);}
.z-sy6-o1:nth-child(3){top: calc(30.72% - 6px);right: calc(14.46% - 6px);}
.z-sy6-o1:nth-child(4){top: calc(33.86% - 6px);right: calc(23.092% - 6px);}
.z-sy6-o1:nth-child(5){top: calc(36.47% - 6px);right: calc(37.54% - 6px);}
.z-sy6-o1:nth-child(6){top: calc(40.78% - 6px);right: calc(22.11% - 6px);}
.z-sy6-o1:nth-child(7){top: calc(44.97% - 6px);right: calc(31.82% - 6px);}
.z-sy6-o1:nth-child(8){top: calc(48.5% - 6px);right: calc(22.11% - 6px);}
.z-sy6-o1:nth-child(9){top: calc(56.47% - 6px);right: calc(38.51% - 6px);}
.z-sy6-o1:nth-child(10){top: calc(60.39% - 6px);right: calc(15.1% - 6px);}
.z-sy6-o1:nth-child(11){top: calc(70.22% - 6px);right: calc(24.81% - 6px);}
.z-sy6-o1:nth-child(12){top: calc(75.82% - 6px);right: calc(18.77% - 6px);}
.z-sy6-o1:nth-child(13){top: calc(81.83% - 6px);right: calc(26.97% - 6px);}
.z-sy6-o1:nth-child(14){top: calc(88.1% - 6px);right: calc(25.57% - 6px);}*/ }
.image-swiper .z-sy6-d1 {
width: 100%; }
.image-swiper .z-sy6-d2 {
width: 100%;
position: relative; }
.image-swiper .z-sy6-d2 > img {
width: 100%;
position: relative; }
.image-swiper .z-sy6-i1 {
width: 48.6979%;
position: absolute;
top: 5.24%;
left: 3.75%; }
.image-swiper .z-sy6-i1 > img {
width: 100%;
position: relative; }
.image-swiper .z-sy6-d3 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy6-o1 {
width: 10px;
height: 10px;
background: #fff;
border: 0;
border-radius: 50%;
position: absolute;
cursor: pointer; }
.image-swiper .z-sy6-o2 {
width: 100%;
height: 100%;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
animation: circle1 2s linear infinite; }
@keyframes circle1 {
0% {
transform: scale(1);
opacity: 1; }
100% {
transform: scale(3);
opacity: 0; } }
.image-swiper .z-sy6-o3 {
width: 100%;
height: 100%;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
animation: circle2 2s linear infinite;
display: none;
position: absolute;
top: 0;
left: 0; }
@keyframes circle2 {
0% {
transform: scale(3);
opacity: 1; }
100% {
transform: scale(5);
opacity: 0; } }
.image-swiper .z-sy6-o1:hover .z-sy6-o3 {
display: block; }
.image-swiper .z-sy6-p1 {
font-size: 12px;
line-height: 12px;
color: #fff;
white-space: nowrap;
position: absolute;
top: -4px;
left: 28px; }
.image-swiper .z-sy6-p2 {
position: absolute;
top: 15.14%;
right: 8.64%;
font-size: 50px;
line-height: 70px;
color: #fff;
font-weight: bold;
text-align: right; }
.image-swiper .z-sy6-p2 span {
color: #d51920; }
.image-swiper .z-sy6-l1 {
width: 250px;
height: 1px;
background: #fff;
position: absolute;
top: 58.89%;
right: 8.64%; }
.image-swiper .z-sy6-p3 {
font-size: 18px;
line-height: 40px;
color: #fff;
font-weight: bold;
position: absolute;
top: 61.3%;
right: 8.64%;
text-align: right; } }
@media only screen and (max-width: 1269px) and (min-width: 1024px) {
.image-swiper {
/*.z-sy6-o1:nth-child(1){top: calc(15.56% - 6px);right: calc(4.64% - 6px);}
.z-sy6-o1:nth-child(2){top: calc(22.88% - 6px);right: calc(11.65% - 6px);}
.z-sy6-o1:nth-child(3){top: calc(30.72% - 6px);right: calc(14.46% - 6px);}
.z-sy6-o1:nth-child(4){top: calc(33.86% - 6px);right: calc(23.092% - 6px);}
.z-sy6-o1:nth-child(5){top: calc(36.47% - 6px);right: calc(37.54% - 6px);}
.z-sy6-o1:nth-child(6){top: calc(40.78% - 6px);right: calc(22.11% - 6px);}
.z-sy6-o1:nth-child(7){top: calc(44.97% - 6px);right: calc(31.82% - 6px);}
.z-sy6-o1:nth-child(8){top: calc(48.5% - 6px);right: calc(22.11% - 6px);}
.z-sy6-o1:nth-child(9){top: calc(56.47% - 6px);right: calc(38.51% - 6px);}
.z-sy6-o1:nth-child(10){top: calc(60.39% - 6px);right: calc(15.1% - 6px);}
.z-sy6-o1:nth-child(11){top: calc(70.22% - 6px);right: calc(24.81% - 6px);}
.z-sy6-o1:nth-child(12){top: calc(75.82% - 6px);right: calc(18.77% - 6px);}
.z-sy6-o1:nth-child(13){top: calc(81.83% - 6px);right: calc(26.97% - 6px);}
.z-sy6-o1:nth-child(14){top: calc(88.1% - 6px);right: calc(25.57% - 6px);}*/ }
.image-swiper .z-sy6-d1 {
width: 100%; }
.image-swiper .z-sy6-d2 {
width: 100%;
position: relative; }
.image-swiper .z-sy6-d2 > img {
width: 100%;
position: relative; }
.image-swiper .z-sy6-i1 {
width: 48.6979%;
position: absolute;
top: 5.24%;
left: 3.75%; }
.image-swiper .z-sy6-i1 > img {
width: 100%;
position: relative; }
.image-swiper .z-sy6-d3 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy6-o1 {
width: 10px;
height: 10px;
background: #fff;
border: 0;
border-radius: 50%;
position: absolute;
cursor: pointer; }
.image-swiper .z-sy6-o2 {
width: 100%;
height: 100%;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
animation: circle1 2s linear infinite; }
@keyframes circle1 {
0% {
transform: scale(1);
opacity: 1; }
100% {
transform: scale(3);
opacity: 0; } }
.image-swiper .z-sy6-o3 {
width: 100%;
height: 100%;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
animation: circle2 2s linear infinite;
display: none;
position: absolute;
top: 0;
left: 0; }
@keyframes circle2 {
0% {
transform: scale(3);
opacity: 1; }
100% {
transform: scale(5);
opacity: 0; } }
.image-swiper .z-sy6-o1:hover .z-sy6-o3 {
display: block; }
.image-swiper .z-sy6-p1 {
font-size: 12px;
line-height: 12px;
color: #fff;
white-space: nowrap;
position: absolute;
top: -2px;
left: 24px; }
.image-swiper .z-sy6-p2 {
position: absolute;
top: 15.14%;
right: 8.64%;
font-size: 40px;
line-height: 60px;
color: #fff;
font-weight: bold;
text-align: right; }
.image-swiper .z-sy6-p2 span {
color: #d51920; }
.image-swiper .z-sy6-l1 {
width: 250px;
height: 1px;
background: #fff;
position: absolute;
top: 58.89%;
right: 8.64%; }
.image-swiper .z-sy6-p3 {
font-size: 16px;
line-height: 32px;
color: #fff;
font-weight: bold;
position: absolute;
top: 61.3%;
right: 8.64%;
text-align: right; } }
@media only screen and (max-width: 1023px) {
.image-swiper {
/*.z-sy6-o1:nth-child(1){top: calc(15.56% - 0.06rem);right: calc(4.64% - 0.06rem);}
.z-sy6-o1:nth-child(2){top: calc(22.88% - 0.06rem);right: calc(11.65% - 0.06rem);}
.z-sy6-o1:nth-child(3){top: calc(30.72% - 0.06rem);right: calc(14.46% - 0.06rem);}
.z-sy6-o1:nth-child(4){top: calc(33.86% - 0.06rem);right: calc(23.092% - 0.06rem);}
.z-sy6-o1:nth-child(5){top: calc(36.47% - 0.06rem);right: calc(37.54% - 0.06rem);}
.z-sy6-o1:nth-child(6){top: calc(40.78% - 0.06rem);right: calc(22.11% - 0.06rem);}
.z-sy6-o1:nth-child(7){top: calc(44.97% - 0.06rem);right: calc(31.82% - 0.06rem);}
.z-sy6-o1:nth-child(8){top: calc(48.5% - 0.06rem);right: calc(22.11% - 0.06rem);}
.z-sy6-o1:nth-child(9){top: calc(56.47% - 0.06rem);right: calc(38.51% - 0.06rem);}
.z-sy6-o1:nth-child(10){top: calc(60.39% - 0.06rem);right: calc(15.1% - 0.06rem);}
.z-sy6-o1:nth-child(11){top: calc(70.22% - 0.06rem);right: calc(24.81% - 0.06rem);}
.z-sy6-o1:nth-child(12){top: calc(75.82% - 0.06rem);right: calc(18.77% - 0.06rem);}
.z-sy6-o1:nth-child(13){top: calc(81.83% - 0.06rem);right: calc(26.97% - 0.06rem);}
.z-sy6-o1:nth-child(14){top: calc(88.1% - 0.06rem);right: calc(25.57% - 0.06rem);}*/ }
.image-swiper .z-sy6-d1 {
width: 100%;
background: #fff; }
.image-swiper .z-sy6-d2 {
width: 100%;
position: relative;
height: 10.56rem;
overflow: hidden; }
.image-swiper .z-sy6-d2 > img {
height: 100%;
position: relative;
margin-left: -140%; }
.image-swiper .z-sy6-i1 {
width: calc(100% - 0.8rem);
position: absolute;
top: 0.63rem;
left: 0.3rem; }
.image-swiper .z-sy6-i1 > img {
width: 100%;
position: relative; }
.image-swiper .z-sy6-d3 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-sy6-o1 {
width: 0.12rem;
height: 0.12rem;
background: #fff;
border: 0;
border-radius: 50%;
position: absolute;
cursor: pointer; }
.image-swiper .z-sy6-o2 {
width: 100%;
height: 100%;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
animation: circle1 2s linear infinite; }
@keyframes circle1 {
0% {
transform: scale(1);
opacity: 1; }
100% {
transform: scale(3);
opacity: 0; } }
.image-swiper .z-sy6-o3 {
width: 100%;
height: 100%;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
animation: circle2 2s linear infinite;
display: none;
position: absolute;
top: 0;
left: 0; }
@keyframes circle2 {
0% {
transform: scale(3);
opacity: 1; }
100% {
transform: scale(5);
opacity: 0; } }
.image-swiper .z-sy6-o1:hover .z-sy6-o3 {
display: block; }
.image-swiper .z-sy6-p1 {
font-size: 0.14rem;
line-height: 0.14rem;
color: #fff;
white-space: nowrap;
position: absolute;
top: -0.02rem;
left: 0.22rem; }
.image-swiper .z-sy6-p2 {
position: absolute;
top: 6.52rem;
left: 0.24rem;
font-size: 0.42rem;
line-height: 0.66rem;
color: #fff;
font-weight: bold;
text-align: left; }
.image-swiper .z-sy6-p2 span {
color: #d51920; }
.image-swiper .z-sy6-l1 {
width: 2.64rem;
height: 1px;
background: #fff;
position: absolute;
top: 8.68rem;
left: 0.24rem; }
.image-swiper .z-sy6-p3 {
font-size: 0.22rem;
line-height: 0.36rem;
color: #fff;
font-weight: bold;
position: absolute;
top: 8.92rem;
left: 0.24rem;
text-align: left; } }
.image-swiper .z-sy6-o1:nth-child(1) {
top: calc(145/770*100%);
right: calc(97/934*100%); }
.image-swiper .z-sy6-o1:nth-child(2) {
top: calc(187/770*100%);
right: calc(99/934*100%); }
.image-swiper .z-sy6-o1:nth-child(3) {
top: calc(222/770*100%);
right: calc(130/934*100%); }
.image-swiper .z-sy6-o1:nth-child(4) {
top: calc(258/770*100%);
right: calc(217/934*100%); }
.image-swiper .z-sy6-o1:nth-child(5) {
top: calc(287/770*100%);
right: calc(196/934*100%); }
.image-swiper .z-sy6-o1:nth-child(6) {
top: calc(344/770*100%);
right: calc(297/934*100%); }
.image-swiper .z-sy6-o1:nth-child(7) {
top: calc(374/770*100%);
right: calc(208/934*100%); }
.image-swiper .z-sy6-o1:nth-child(8) {
top: calc(431/770*100%);
right: calc(360/934*100%); }
.image-swiper .z-sy6-o1:nth-child(9) {
top: calc(494/770*100%);
right: calc(473/934*100%); }
.image-swiper .z-sy6-o1:nth-child(10) {
top: calc(487/770*100%);
right: calc(255/934*100%); }
.image-swiper .z-sy6-o1:nth-child(11) {
top: calc(463/770*100%);
right: calc(140/934*100%); }
.image-swiper .z-sy6-o1:nth-child(12) {
top: calc(536/770*100%);
right: calc(222/934*100%); }
.image-swiper .z-sy6-o1:nth-child(13) {
top: calc(564/770*100%);
right: calc(156/934*100%); }
.image-swiper .z-sy6-o1:nth-child(14) {
top: calc(652/770*100%);
right: calc(243/934*100%); }
.image-swiper .z-sy6-o1:nth-child(15) {
top: calc(594/770*100%);
right: calc(158/934*100%); }
.image-swiper .z-sy6-o1:nth-child(16) {
top: calc(620/770*100%);
right: calc(174/934*100%); }
.image-swiper .z-sy6-o1:nth-child(17) {
top: calc(336/770*100%);
right: calc(146/934*100%); }
.image-swiper .z-sy6-o1:nth-child(18) {
top: calc(358/770*100%);
right: calc(163/934*100%); }
.image-swiper .z-sy6-o1:nth-child(19) {
top: calc(293/770*100%);
right: calc(293/934*100%); }
.image-swiper .z-sy6-o1:nth-child(20) {
top: calc(305/770*100%);
right: calc(276/934*100%); }
.image-swiper .z-sy6-o1:nth-child(21) {
top: calc(325/770*100%);
right: calc(288/934*100%); }
.image-swiper .z-sy6-o1:nth-child(22) {
top: calc(346/770*100%);
right: calc(274/934*100%); }
.image-swiper .z-sy6-o1:nth-child(23) {
top: calc(359/770*100%);
right: calc(319/934*100%); }
.image-swiper .z-sy6-o1:nth-child(24) {
top: calc(366/770*100%);
right: calc(299/934*100%); }
.image-swiper .z-sy6-o1:nth-child(25) {
top: calc(381/770*100%);
right: calc(284/934*100%); }
.image-swiper .z-sy6-o1:nth-child(26) {
top: calc(381/770*100%);
right: calc(315/934*100%); }
.image-swiper .z-sy6-o1:nth-child(27) {
top: calc(395/770*100%);
right: calc(300/934*100%); }
.image-swiper .z-sy6-o1:nth-child(28) {
top: calc(400/770*100%);
right: calc(321/934*100%); }
.image-swiper .z-sy6-o1:nth-child(29) {
top: calc(231/770*100%);
right: calc(146/934*100%); }
.image-swiper .z-sy6-o1:nth-child(30) {
top: calc(246/770*100%);
right: calc(131/934*100%); }
.image-swiper .z-sy6-o1:nth-child(31) {
top: calc(251/770*100%);
right: calc(165/934*100%); }
.image-swiper .z-sy6-o1:nth-child(32) {
top: calc(271/770*100%);
right: calc(138/934*100%); }
.image-swiper .z-sy6-o1:nth-child(33) {
top: calc(266/770*100%);
right: calc(114/934*100%); }
.image-swiper .z-sy6-o1:nth-child(34) {
top: calc(291/770*100%);
right: calc(142/934*100%); }
.image-swiper .z-sy6-o1:nth-child(35) {
top: calc(67/770*100%);
right: calc(119/934*100%); }
.image-swiper .z-sy6-o1:nth-child(36) {
top: calc(92/770*100%);
right: calc(86/934*100%); }
.image-swiper .z-sy6-o1:nth-child(37) {
top: calc(101/770*100%);
right: calc(55/934*100%); }
.image-swiper .z-sy6-o1:nth-child(38) {
top: calc(93/770*100%);
right: calc(130/934*100%); }
.image-swiper .z-sy6-o1:nth-child(39) {
top: calc(120/770*100%);
right: calc(142/934*100%); }
.image-swiper .z-sy6-o1:nth-child(40) {
top: calc(113/770*100%);
right: calc(115/934*100%); }
.image-swiper .z-sy6-o1:nth-child(41) {
top: calc(127/770*100%);
right: calc(56/934*100%); }
.image-swiper .z-sy6-o1:nth-child(42) {
top: calc(147/770*100%);
right: calc(71/934*100%); }
.image-swiper .z-sy6-o1:nth-child(43) {
top: calc(149/770*100%);
right: calc(41/934*100%); }
.image-swiper .z-sy6-o1:nth-child(44) {
top: calc(168/770*100%);
right: calc(56/934*100%); }
.image-swiper .z-sy6-o1:nth-child(45) {
top: calc(324/770*100%);
right: calc(250/934*100%); }
.image-swiper .z-sy6-o1:nth-child(46) {
top: calc(456/770*100%);
right: calc(162/934*100%); }
.image-swiper .z-sy6-o1:nth-child(1) .z-sy6-p1 {
top: calc(-2/10*100%);
left: calc(-60/10*100%); }
.image-swiper .z-sy6-o1:nth-child(2) .z-sy6-p1 {
top: calc(-2/10*100%);
left: calc(-50/10*100%); }
.image-swiper .z-sy6-o1:nth-child(3) .z-sy6-p1 {
top: calc(-4/10*100%);
left: calc(20/10*100%); }
.image-swiper .z-sy6-o1:nth-child(4) .z-sy6-p1 {
top: calc(-8/10*100%);
left: calc(-40/10*100%); }
.image-swiper .z-sy6-o1:nth-child(5) .z-sy6-p1 {
top: calc(-4/10*100%);
left: calc(-40/10*100%); }
.image-swiper .z-sy6-o1:nth-child(6) .z-sy6-p1 {
top: calc(-7/10*100%);
left: calc(-40/10*100%); }
.image-swiper .z-sy6-o1:nth-child(7) .z-sy6-p1 {
top: calc(20/10*100%);
left: calc(-12/10*100%); }
.image-swiper .z-sy6-o1:nth-child(8) .z-sy6-p1 {
top: calc(-4/10*100%);
left: calc(-40/10*100%); }
.image-swiper .z-sy6-o1:nth-child(9) .z-sy6-p1 {
top: calc(0/10*100%);
left: calc(30/10*100%); }
.image-swiper .z-sy6-o1:nth-child(10) .z-sy6-p1 {
top: calc(-3/10*100%);
left: calc(26/10*100%); }
.image-swiper .z-sy6-o1:nth-child(11) .z-sy6-p1 {
top: calc(-3/10*100%);
left: calc(28/10*100%); }
.image-swiper .z-sy6-o1:nth-child(12) .z-sy6-p1 {
top: calc(-3/10*100%);
left: calc(30/10*100%); }
.image-swiper .z-sy6-o1:nth-child(13) .z-sy6-p1 {
top: calc(3/10*100%);
left: calc(30/10*100%); }
.image-swiper .z-sy6-o1:nth-child(14) .z-sy6-p1 {
top: calc(25/10*100%);
left: calc(22/10*100%); }
.image-swiper .z-sy6-o1:nth-child(15) .z-sy6-p1 {
top: calc(1/10*100%);
left: calc(32/10*100%); }
.image-swiper .z-sy6-o1:nth-child(16) .z-sy6-p1 {
top: calc(1/10*100%);
left: calc(30/10*100%); }
.image-swiper .z-sy6-o1:nth-child(17) .z-sy6-p1 {
top: calc(-2/10*100%);
left: calc(30/10*100%); }
.image-swiper .z-sy6-o1:nth-child(18) .z-sy6-p1 {
top: calc(-3/10*100%);
left: calc(30/10*100%); }
.image-swiper .z-sy6-o1:nth-child(19) .z-sy6-p1 {
top: calc(-3/10*100%);
left: calc(-38/10*100%); }
.image-swiper .z-sy6-o1:nth-child(20) .z-sy6-p1 {
top: calc(-3/10*100%);
left: calc(21/10*100%); }
.image-swiper .z-sy6-o1:nth-child(21) .z-sy6-p1 {
top: calc(-8/10*100%);
left: calc(-38/10*100%); }
.image-swiper .z-sy6-o1:nth-child(22) .z-sy6-p1 {
top: calc(-2/10*100%);
left: calc(21/10*100%); }
.image-swiper .z-sy6-o1:nth-child(23) .z-sy6-p1 {
top: calc(-3/10*100%);
left: calc(-38/10*100%); }
.image-swiper .z-sy6-o1:nth-child(24) .z-sy6-p1 {
top: calc(-4/10*100%);
left: calc(21/10*100%); }
.image-swiper .z-sy6-o1:nth-child(25) .z-sy6-p1 {
top: calc(0/10*100%);
left: calc(21/10*100%); }
.image-swiper .z-sy6-o1:nth-child(26) .z-sy6-p1 {
top: calc(-3/10*100%);
left: calc(-37/10*100%); }
.image-swiper .z-sy6-o1:nth-child(27) .z-sy6-p1 {
top: calc(7/10*100%);
left: calc(18/10*100%); }
.image-swiper .z-sy6-o1:nth-child(28) .z-sy6-p1 {
top: calc(21/10*100%);
left: calc(-11/10*100%); }
.image-swiper .z-sy6-o1:nth-child(29) .z-sy6-p1 {
top: calc(-3/10*100%);
left: calc(-38/10*100%); }
.image-swiper .z-sy6-o1:nth-child(30) .z-sy6-p1 {
top: calc(-5/10*100%);
left: calc(18/10*100%); }
.image-swiper .z-sy6-o1:nth-child(31) .z-sy6-p1 {
top: calc(-5/10*100%);
left: calc(-36/10*100%); }
.image-swiper .z-sy6-o1:nth-child(32) .z-sy6-p1 {
top: calc(-3/10*100%);
left: calc(-40/10*100%); }
.image-swiper .z-sy6-o1:nth-child(33) .z-sy6-p1 {
top: calc(0/10*100%);
left: calc(21/10*100%); }
.image-swiper .z-sy6-o1:nth-child(34) .z-sy6-p1 {
top: calc(-2/10*100%);
left: calc(22/10*100%); }
.image-swiper .z-sy6-o1:nth-child(35) .z-sy6-p1 {
top: calc(-30/10*100%);
left: calc(-10/10*100%); }
.image-swiper .z-sy6-o1:nth-child(36) .z-sy6-p1 {
top: calc(-20/10*100%);
left: calc(20/10*100%); }
.image-swiper .z-sy6-o1:nth-child(37) .z-sy6-p1 {
top: calc(-2/10*100%);
left: calc(20/10*100%); }
.image-swiper .z-sy6-o1:nth-child(38) .z-sy6-p1 {
top: calc(-1/10*100%);
left: calc(-84/10*100%); }
.image-swiper .z-sy6-o1:nth-child(39) .z-sy6-p1 {
top: calc(-2/10*100%);
left: calc(-44/10*100%); }
.image-swiper .z-sy6-o1:nth-child(40) .z-sy6-p1 {
top: calc(1/10*100%);
left: calc(14/10*100%); }
.image-swiper .z-sy6-o1:nth-child(41) .z-sy6-p1 {
top: calc(-2/10*100%);
left: calc(20/10*100%); }
.image-swiper .z-sy6-o1:nth-child(42) .z-sy6-p1 {
top: calc(14/10*100%);
left: calc(-37/10*100%); }
.image-swiper .z-sy6-o1:nth-child(43) .z-sy6-p1 {
top: calc(-2/10*100%);
left: calc(20/10*100%); }
.image-swiper .z-sy6-o1:nth-child(44) .z-sy6-p1 {
top: calc(2/10*100%);
left: calc(20/10*100%); }
.image-swiper .z-sy6-o1:nth-child(45) .z-sy6-p1 {
top: calc(-2/10*100%);
left: calc(20/10*100%); }
.image-swiper .z-sy6-o1:nth-child(46) .z-sy6-p1 {
top: calc(-24/10*100%);
left: calc(12/10*100%); }
@media only screen and (min-width: 1440px) {
.image-swiper .z-sy6-o1 .z-sy6-onn1 {
font-size: 16px !important;
font-family: bold !important; } }
@media only screen and (min-width: 1270px) and (max-width: 1439px) {
.image-swiper .z-sy6-o1 .z-sy6-onn1 {
font-size: 14px !important;
font-family: bold !important; } }
@media only screen and (max-width: 1269px) {
.image-swiper .z-sy6-o1 {
display: none; }
.image-swiper .z-sy6-o1:nth-child(1) {
display: block; }
.image-swiper .z-sy6-o1:nth-child(2) {
display: block; }
.image-swiper .z-sy6-o1:nth-child(3) {
display: block; }
.image-swiper .z-sy6-o1:nth-child(4) {
display: block; }
.image-swiper .z-sy6-o1:nth-child(5) {
display: block; }
.image-swiper .z-sy6-o1:nth-child(6) {
display: block; }
.image-swiper .z-sy6-o1:nth-child(7) {
display: block; }
.image-swiper .z-sy6-o1:nth-child(8) {
display: block; }
.image-swiper .z-sy6-o1:nth-child(9) {
display: block; }
.image-swiper .z-sy6-o1:nth-child(10) {
display: block; }
.image-swiper .z-sy6-o1:nth-child(11) {
display: block; }
.image-swiper .z-sy6-o1:nth-child(12) {
display: block; }
.image-swiper .z-sy6-o1:nth-child(13) {
display: block; }
.image-swiper .z-sy6-o1:nth-child(14) {
display: block; }
.image-swiper .z-sy6-o1:nth-child(45) {
display: block; }
.image-swiper .z-sy6-o1:nth-child(46) {
display: block; } }
@media only screen and (max-width: 1023px) {
.image-swiper .z-sy6-o1:nth-child(1) {
top: calc(120/770*100%);
right: calc(97/934*100%); } }
@media only screen and (min-width: 1440px) {
.image-swiper {
/*
.z-sy7-d4:nth-child(1){top: 40%;left: 10%;animation: sy71 3s -0.5s linear infinite;}
.z-sy7-d4:nth-child(2){top: 72%;left: 16%;animation: sy72 3s -0.9s linear infinite;}
.z-sy7-d4:nth-child(3){top: 30%;left: 21%;animation: sy73 3s -1.4s linear infinite;}
.z-sy7-d4:nth-child(4){top: 46%;left: 34%;animation: sy74 3s -0.3s linear infinite;}
.z-sy7-d4:nth-child(5){top: 38%;left: 42%;animation: sy75 3s -1.8s linear infinite;}
.z-sy7-d4:nth-child(6){top: 14%;left: 58%;animation: sy76 3s -2.3s linear infinite;}
.z-sy7-d4:nth-child(7){top: 36%;left: 54%;animation: sy77 3s -2.7s linear infinite;}
.z-sy7-d4:nth-child(8){top: 68%;left: 49%;animation: sy78 3s -1.6s linear infinite;}
.z-sy7-d4:nth-child(9){top: 39%;left: 72%;animation: sy79 3s -1.1s linear infinite;}
.z-sy7-d4:nth-child(10){top: 63%;left: 69%;animation: sy710 3s -2.1s linear infinite;}
.z-sy7-d4:nth-child(11){top: 59%;left: 79%;animation: sy711 3s -1.5s linear infinite;}
*/ }
.image-swiper .z-sy7-d1 {
width: 100%;
position: relative; }
.image-swiper .z-sy7-d2 {
width: 100%;
position: relative; }
.image-swiper .z-sy7-d2 > img {
position: relative; }
.image-swiper .z-sy7-d3 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.image-swiper .z-sy7-d4 {
width: 110px;
height: 110px;
position: absolute; }
.image-swiper .z-sy7-i1 {
width: 100%;
height: 50px;
position: absolute;
top: 20px;
left: 0; }
.image-swiper .z-sy7-i1 img {
height: 100%;
margin: 0 auto; }
.image-swiper .z-sy7-p1 {
width: 100%;
font-size: 16px;
line-height: 16px;
color: #000;
text-align: center;
position: absolute;
top: 74px;
left: 0; }
.image-swiper .z-sy7-d4 .a1 {
width: 100%;
height: 100%;
background: #d0d0d1;
border: 0;
border-radius: 50%;
box-shadow: 0 0 36px rgba(255, 213, 101, 0.64); }
.image-swiper .z-sy7-d4:nth-child(1) .a1 {
transform: scale(1); }
.image-swiper .z-sy7-d4:nth-child(2) .a1 {
transform: scale(0.92); }
.image-swiper .z-sy7-d4:nth-child(3) .a1 {
transform: scale(0.84); }
.image-swiper .z-sy7-d4:nth-child(4) .a1 {
transform: scale(0.76); }
.image-swiper .z-sy7-d4:nth-child(5) .a1 {
transform: scale(1); }
.image-swiper .z-sy7-d4:nth-child(6) .a1 {
transform: scale(0.92); }
.image-swiper .z-sy7-d4:nth-child(7) .a1 {
transform: scale(0.84); }
.image-swiper .z-sy7-d4:nth-child(8) .a1 {
transform: scale(0.76); }
.image-swiper .z-sy7-d4:nth-child(9) .a1 {
transform: scale(1); }
.image-swiper .z-sy7-d4:nth-child(10) .a1 {
transform: scale(0.92); }
.image-swiper .z-sy7-d4:nth-child(11) .a1 {
transform: scale(0.84); }
.image-swiper .z-sy7-d4:nth-child(1) {
top: 40%;
left: 10%; }
.image-swiper .z-sy7-d4:nth-child(2) {
top: 72%;
left: 16%; }
.image-swiper .z-sy7-d4:nth-child(3) {
top: 30%;
left: 21%; }
.image-swiper .z-sy7-d4:nth-child(4) {
top: 46%;
left: 34%; }
.image-swiper .z-sy7-d4:nth-child(5) {
top: 38%;
left: 42%; }
.image-swiper .z-sy7-d4:nth-child(6) {
top: 14%;
left: 58%; }
.image-swiper .z-sy7-d4:nth-child(7) {
top: 36%;
left: 54%; }
.image-swiper .z-sy7-d4:nth-child(8) {
top: 68%;
left: 49%; }
.image-swiper .z-sy7-d4:nth-child(9) {
top: 39%;
left: 72%; }
.image-swiper .z-sy7-d4:nth-child(10) {
top: 63%;
left: 69%; }
.image-swiper .z-sy7-d4:nth-child(11) {
top: 59%;
left: 79%; }
.image-swiper .z-sy7-d4:nth-child(1).hello1 {
animation: sy71 3s -0.5s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(2).hello1 {
animation: sy72 3s -0.9s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(3).hello1 {
animation: sy73 3s -1.4s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(4).hello1 {
animation: sy74 3s -0.3s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(5).hello1 {
animation: sy75 3s -1.8s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(6).hello1 {
animation: sy76 3s -2.3s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(7).hello1 {
animation: sy77 3s -2.7s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(8).hello1 {
animation: sy78 3s -1.6s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(9).hello1 {
animation: sy79 3s -1.1s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(10).hello1 {
animation: sy710 3s -2.1s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(11).hello1 {
animation: sy711 3s -1.5s linear infinite; }
@keyframes sy71 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(50px); }
100% {
transform: translateY(0px); } }
@keyframes sy72 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(50px); }
100% {
transform: translateY(0px); } }
@keyframes sy73 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(50px); }
100% {
transform: translateY(0px); } }
@keyframes sy74 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(50px); }
100% {
transform: translateY(0px); } }
@keyframes sy75 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(50px); }
100% {
transform: translateY(0px); } }
@keyframes sy76 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(50px); }
100% {
transform: translateY(0px); } }
@keyframes sy77 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(50px); }
100% {
transform: translateY(0px); } }
@keyframes sy78 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(50px); }
100% {
transform: translateY(0px); } }
@keyframes sy79 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(50px); }
100% {
transform: translateY(0px); } }
@keyframes sy710 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(50px); }
100% {
transform: translateY(0px); } }
@keyframes sy711 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(50px); }
100% {
transform: translateY(0px); } } }
@media only screen and (max-width: 1439px) and (min-width: 1270px) {
.image-swiper {
/*
.z-sy7-d4:nth-child(1){top: 40%;left: 10%;animation: sy71 3s -0.5s linear infinite;}
.z-sy7-d4:nth-child(2){top: 72%;left: 16%;animation: sy72 3s -0.9s linear infinite;}
.z-sy7-d4:nth-child(3){top: 30%;left: 21%;animation: sy73 3s -1.4s linear infinite;}
.z-sy7-d4:nth-child(4){top: 46%;left: 34%;animation: sy74 3s -0.3s linear infinite;}
.z-sy7-d4:nth-child(5){top: 38%;left: 42%;animation: sy75 3s -1.8s linear infinite;}
.z-sy7-d4:nth-child(6){top: 14%;left: 58%;animation: sy76 3s -2.3s linear infinite;}
.z-sy7-d4:nth-child(7){top: 36%;left: 54%;animation: sy77 3s -2.7s linear infinite;}
.z-sy7-d4:nth-child(8){top: 68%;left: 49%;animation: sy78 3s -1.6s linear infinite;}
.z-sy7-d4:nth-child(9){top: 39%;left: 72%;animation: sy79 3s -1.1s linear infinite;}
.z-sy7-d4:nth-child(10){top: 63%;left: 69%;animation: sy710 3s -2.1s linear infinite;}
.z-sy7-d4:nth-child(11){top: 59%;left: 79%;animation: sy711 3s -1.5s linear infinite;}
*/ }
.image-swiper .z-sy7-d1 {
width: 100%;
position: relative; }
.image-swiper .z-sy7-d2 {
width: 100%;
position: relative; }
.image-swiper .z-sy7-d2 > img {
position: relative; }
.image-swiper .z-sy7-d3 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.image-swiper .z-sy7-d4 {
width: 100px;
height: 100px;
position: absolute; }
.image-swiper .z-sy7-i1 {
width: 100%;
height: 45px;
position: absolute;
top: 16px;
left: 0; }
.image-swiper .z-sy7-i1 img {
height: 100%;
margin: 0 auto; }
.image-swiper .z-sy7-p1 {
width: 100%;
font-size: 14px;
line-height: 14px;
color: #000;
text-align: center;
position: absolute;
top: 66px;
left: 0; }
.image-swiper .z-sy7-d4 .a1 {
width: 100%;
height: 100%;
background: #d0d0d1;
border: 0;
border-radius: 50%;
box-shadow: 0 0 36px rgba(255, 213, 101, 0.64); }
.image-swiper .z-sy7-d4:nth-child(1) .a1 {
transform: scale(1); }
.image-swiper .z-sy7-d4:nth-child(2) .a1 {
transform: scale(0.92); }
.image-swiper .z-sy7-d4:nth-child(3) .a1 {
transform: scale(0.84); }
.image-swiper .z-sy7-d4:nth-child(4) .a1 {
transform: scale(0.76); }
.image-swiper .z-sy7-d4:nth-child(5) .a1 {
transform: scale(1); }
.image-swiper .z-sy7-d4:nth-child(6) .a1 {
transform: scale(0.92); }
.image-swiper .z-sy7-d4:nth-child(7) .a1 {
transform: scale(0.84); }
.image-swiper .z-sy7-d4:nth-child(8) .a1 {
transform: scale(0.76); }
.image-swiper .z-sy7-d4:nth-child(9) .a1 {
transform: scale(1); }
.image-swiper .z-sy7-d4:nth-child(10) .a1 {
transform: scale(0.92); }
.image-swiper .z-sy7-d4:nth-child(11) .a1 {
transform: scale(0.84); }
.image-swiper .z-sy7-d4:nth-child(1) {
top: 40%;
left: 10%; }
.image-swiper .z-sy7-d4:nth-child(2) {
top: 72%;
left: 16%; }
.image-swiper .z-sy7-d4:nth-child(3) {
top: 30%;
left: 21%; }
.image-swiper .z-sy7-d4:nth-child(4) {
top: 46%;
left: 34%; }
.image-swiper .z-sy7-d4:nth-child(5) {
top: 38%;
left: 42%; }
.image-swiper .z-sy7-d4:nth-child(6) {
top: 14%;
left: 58%; }
.image-swiper .z-sy7-d4:nth-child(7) {
top: 36%;
left: 54%; }
.image-swiper .z-sy7-d4:nth-child(8) {
top: 68%;
left: 49%; }
.image-swiper .z-sy7-d4:nth-child(9) {
top: 39%;
left: 72%; }
.image-swiper .z-sy7-d4:nth-child(10) {
top: 63%;
left: 69%; }
.image-swiper .z-sy7-d4:nth-child(11) {
top: 59%;
left: 79%; }
.image-swiper .z-sy7-d4:nth-child(1).hello1 {
animation: sy71 3s -0.5s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(2).hello1 {
animation: sy72 3s -0.9s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(3).hello1 {
animation: sy73 3s -1.4s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(4).hello1 {
animation: sy74 3s -0.3s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(5).hello1 {
animation: sy75 3s -1.8s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(6).hello1 {
animation: sy76 3s -2.3s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(7).hello1 {
animation: sy77 3s -2.7s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(8).hello1 {
animation: sy78 3s -1.6s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(9).hello1 {
animation: sy79 3s -1.1s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(10).hello1 {
animation: sy710 3s -2.1s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(11).hello1 {
animation: sy711 3s -1.5s linear infinite; }
@keyframes sy71 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(40px); }
100% {
transform: translateY(0px); } }
@keyframes sy72 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(40px); }
100% {
transform: translateY(0px); } }
@keyframes sy73 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(40px); }
100% {
transform: translateY(0px); } }
@keyframes sy74 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(40px); }
100% {
transform: translateY(0px); } }
@keyframes sy75 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(40px); }
100% {
transform: translateY(0px); } }
@keyframes sy76 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(40px); }
100% {
transform: translateY(0px); } }
@keyframes sy77 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(40px); }
100% {
transform: translateY(0px); } }
@keyframes sy78 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(40px); }
100% {
transform: translateY(0px); } }
@keyframes sy79 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(40px); }
100% {
transform: translateY(0px); } }
@keyframes sy710 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(40px); }
100% {
transform: translateY(0px); } }
@keyframes sy711 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(40px); }
100% {
transform: translateY(0px); } } }
@media only screen and (max-width: 1269px) and (min-width: 1024px) {
.image-swiper {
/*
.z-sy7-d4:nth-child(1){top: 40%;left: 10%;animation: sy71 3s -0.5s linear infinite;}
.z-sy7-d4:nth-child(2){top: 72%;left: 16%;animation: sy72 3s -0.9s linear infinite;}
.z-sy7-d4:nth-child(3){top: 30%;left: 21%;animation: sy73 3s -1.4s linear infinite;}
.z-sy7-d4:nth-child(4){top: 46%;left: 34%;animation: sy74 3s -0.3s linear infinite;}
.z-sy7-d4:nth-child(5){top: 38%;left: 42%;animation: sy75 3s -1.8s linear infinite;}
.z-sy7-d4:nth-child(6){top: 14%;left: 58%;animation: sy76 3s -2.3s linear infinite;}
.z-sy7-d4:nth-child(7){top: 36%;left: 54%;animation: sy77 3s -2.7s linear infinite;}
.z-sy7-d4:nth-child(8){top: 68%;left: 49%;animation: sy78 3s -1.6s linear infinite;}
.z-sy7-d4:nth-child(9){top: 39%;left: 72%;animation: sy79 3s -1.1s linear infinite;}
.z-sy7-d4:nth-child(10){top: 63%;left: 69%;animation: sy710 3s -2.1s linear infinite;}
.z-sy7-d4:nth-child(11){top: 59%;left: 79%;animation: sy711 3s -1.5s linear infinite;}
*/ }
.image-swiper .z-sy7-d1 {
width: 100%;
position: relative; }
.image-swiper .z-sy7-d2 {
width: 100%;
position: relative; }
.image-swiper .z-sy7-d2 > img {
position: relative; }
.image-swiper .z-sy7-d3 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.image-swiper .z-sy7-d4 {
width: 90px;
height: 90px;
position: absolute; }
.image-swiper .z-sy7-i1 {
width: 100%;
height: 40px;
position: absolute;
top: 12px;
left: 0; }
.image-swiper .z-sy7-i1 img {
height: 100%;
margin: 0 auto; }
.image-swiper .z-sy7-p1 {
width: 100%;
font-size: 12px;
line-height: 12px;
color: #000;
text-align: center;
position: absolute;
top: 60px;
left: 0; }
.image-swiper .z-sy7-d4 .a1 {
width: 100%;
height: 100%;
background: #d0d0d1;
border: 0;
border-radius: 50%;
box-shadow: 0 0 36px rgba(255, 213, 101, 0.64); }
.image-swiper .z-sy7-d4:nth-child(1) .a1 {
transform: scale(1); }
.image-swiper .z-sy7-d4:nth-child(2) .a1 {
transform: scale(0.92); }
.image-swiper .z-sy7-d4:nth-child(3) .a1 {
transform: scale(0.84); }
.image-swiper .z-sy7-d4:nth-child(4) .a1 {
transform: scale(0.76); }
.image-swiper .z-sy7-d4:nth-child(5) .a1 {
transform: scale(1); }
.image-swiper .z-sy7-d4:nth-child(6) .a1 {
transform: scale(0.92); }
.image-swiper .z-sy7-d4:nth-child(7) .a1 {
transform: scale(0.84); }
.image-swiper .z-sy7-d4:nth-child(8) .a1 {
transform: scale(0.76); }
.image-swiper .z-sy7-d4:nth-child(9) .a1 {
transform: scale(1); }
.image-swiper .z-sy7-d4:nth-child(10) .a1 {
transform: scale(0.92); }
.image-swiper .z-sy7-d4:nth-child(11) .a1 {
transform: scale(0.84); }
.image-swiper .z-sy7-d4:nth-child(1) {
top: 40%;
left: 10%; }
.image-swiper .z-sy7-d4:nth-child(2) {
top: 72%;
left: 16%; }
.image-swiper .z-sy7-d4:nth-child(3) {
top: 30%;
left: 21%; }
.image-swiper .z-sy7-d4:nth-child(4) {
top: 46%;
left: 34%; }
.image-swiper .z-sy7-d4:nth-child(5) {
top: 38%;
left: 42%; }
.image-swiper .z-sy7-d4:nth-child(6) {
top: 14%;
left: 58%; }
.image-swiper .z-sy7-d4:nth-child(7) {
top: 36%;
left: 54%; }
.image-swiper .z-sy7-d4:nth-child(8) {
top: 68%;
left: 49%; }
.image-swiper .z-sy7-d4:nth-child(9) {
top: 39%;
left: 72%; }
.image-swiper .z-sy7-d4:nth-child(10) {
top: 63%;
left: 69%; }
.image-swiper .z-sy7-d4:nth-child(11) {
top: 59%;
left: 79%; }
.image-swiper .z-sy7-d4:nth-child(1).hello1 {
animation: sy71 3s -0.5s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(2).hello1 {
animation: sy72 3s -0.9s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(3).hello1 {
animation: sy73 3s -1.4s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(4).hello1 {
animation: sy74 3s -0.3s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(5).hello1 {
animation: sy75 3s -1.8s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(6).hello1 {
animation: sy76 3s -2.3s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(7).hello1 {
animation: sy77 3s -2.7s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(8).hello1 {
animation: sy78 3s -1.6s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(9).hello1 {
animation: sy79 3s -1.1s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(10).hello1 {
animation: sy710 3s -2.1s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(11).hello1 {
animation: sy711 3s -1.5s linear infinite; }
@keyframes sy71 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(30px); }
100% {
transform: translateY(0px); } }
@keyframes sy72 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(30px); }
100% {
transform: translateY(0px); } }
@keyframes sy73 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(30px); }
100% {
transform: translateY(0px); } }
@keyframes sy74 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(30px); }
100% {
transform: translateY(0px); } }
@keyframes sy75 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(30px); }
100% {
transform: translateY(0px); } }
@keyframes sy76 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(30px); }
100% {
transform: translateY(0px); } }
@keyframes sy77 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(30px); }
100% {
transform: translateY(0px); } }
@keyframes sy78 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(30px); }
100% {
transform: translateY(0px); } }
@keyframes sy79 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(30px); }
100% {
transform: translateY(0px); } }
@keyframes sy710 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(30px); }
100% {
transform: translateY(0px); } }
@keyframes sy711 {
0% {
transform: translateY(0px); }
50% {
transform: translateY(30px); }
100% {
transform: translateY(0px); } } }
@media only screen and (max-width: 1023px) {
.image-swiper .z-sy7-d1 {
width: 100%;
position: relative;
background: #f4f4f4; }
.image-swiper .z-sy7-d2 {
width: 100%;
position: relative;
height: 7.4rem; }
.image-swiper .z-sy7-d2 > img {
position: relative;
height: 100%;
width: auto !important;
margin-left: -80%; }
.image-swiper .z-sy7-d3 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.image-swiper .z-sy7-d4 {
width: 1.24rem;
height: 1.24rem;
background: #d0d0d1;
border: 0;
border-radius: 50%;
position: absolute;
box-shadow: 0 0 0.36rem rgba(255, 213, 101, 0.64); }
.image-swiper .z-sy7-i1 {
width: 100%;
height: 0.6rem;
position: absolute;
top: 0.14rem;
left: 0; }
.image-swiper .z-sy7-i1 img {
height: 100%;
margin: 0 auto; }
.image-swiper .z-sy7-p1 {
width: 100%;
font-size: 0.2rem;
line-height: 0.2rem;
color: #000;
text-align: center;
position: absolute;
top: 0.8rem;
left: 0; }
.image-swiper .z-sy7-d4:nth-child(1) {
top: 18%;
left: 4%;
animation: sy71 3s -0.5s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(2) {
top: 6%;
left: 31%;
animation: sy72 3s -0.9s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(3) {
top: 21%;
left: 59%;
animation: sy73 3s -1.4s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(4) {
top: 9%;
left: 76%;
animation: sy74 3s -0.3s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(5) {
top: 38%;
left: 14%;
animation: sy75 3s -1.8s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(6) {
top: 42%;
left: 47%;
animation: sy76 3s -2.3s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(7) {
top: 36%;
left: 75%;
animation: sy77 3s -2.7s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(8) {
top: 68%;
left: 7%;
animation: sy78 3s -1.6s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(9) {
top: 72%;
left: 29%;
animation: sy79 3s -1.1s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(10) {
top: 65%;
left: 61%;
animation: sy710 3s -2.1s linear infinite; }
.image-swiper .z-sy7-d4:nth-child(11) {
top: 74%;
left: 81%;
animation: sy711 3s -1.9s linear infinite; }
@keyframes sy71 {
0% {
transform: translateY(0px) scale(1); }
50% {
transform: translateY(0.5rem) scale(1); }
100% {
transform: translateY(0px) scale(1); } }
@keyframes sy72 {
0% {
transform: translateY(0px) scale(0.92); }
50% {
transform: translateY(0.5rem) scale(0.92); }
100% {
transform: translateY(0px) scale(0.92); } }
@keyframes sy73 {
0% {
transform: translateY(0px) scale(0.84); }
50% {
transform: translateY(0.5rem) scale(0.84); }
100% {
transform: translateY(0px) scale(0.84); } }
@keyframes sy74 {
0% {
transform: translateY(0px) scale(0.76); }
50% {
transform: translateY(0.5rem) scale(0.76); }
100% {
transform: translateY(0px) scale(0.76); } }
@keyframes sy75 {
0% {
transform: translateY(0px) scale(1); }
50% {
transform: translateY(0.5rem) scale(1); }
100% {
transform: translateY(0px) scale(1); } }
@keyframes sy76 {
0% {
transform: translateY(0px) scale(0.92); }
50% {
transform: translateY(0.5rem) scale(0.92); }
100% {
transform: translateY(0px) scale(0.92); } }
@keyframes sy77 {
0% {
transform: translateY(0px) scale(0.84); }
50% {
transform: translateY(0.5rem) scale(0.84); }
100% {
transform: translateY(0px) scale(0.84); } }
@keyframes sy78 {
0% {
transform: translateY(0px) scale(0.76); }
50% {
transform: translateY(0.5rem) scale(0.76); }
100% {
transform: translateY(0px) scale(0.76); } }
@keyframes sy79 {
0% {
transform: translateY(0px) scale(1); }
50% {
transform: translateY(0.5rem) scale(1); }
100% {
transform: translateY(0px) scale(1); } }
@keyframes sy710 {
0% {
transform: translateY(0px) scale(0.92); }
50% {
transform: translateY(0.5rem) scale(0.92); }
100% {
transform: translateY(0px) scale(0.92); } }
@keyframes sy711 {
0% {
transform: translateY(0px) scale(0.84); }
50% {
transform: translateY(0.5rem) scale(0.84); }
100% {
transform: translateY(0px) scale(0.84); } } }
@media only screen and (min-width: 1440px) {
.image-swiper .z-sy8-d1 {
width: 100%; }
.image-swiper .z-sy8-d2 {
width: 100%;
height: 0;
padding-bottom: 33.75%;
overflow: hidden;
position: relative;
background: #f7f7f7; }
.image-swiper .z-sy8-d3 {
width: 96.875%;
height: 86.7284%;
position: absolute;
top: calc((100% - 86.7284%) / 2);
left: calc((100% - 96.875%) / 2);
background: #fff; }
.image-swiper .z-sy8-d4 {
width: 94.6237%;
height: 85.7651%;
position: absolute;
top: calc((100% - 85.7651%) / 2);
left: calc((100% - 94.6237%) / 2);
border: 1px solid #e1dddd;
border-bottom: 0; }
.image-swiper .z-sy8-k1 {
width: 16.6666%;
height: 25%;
position: relative;
box-sizing: border-box;
float: left;
background: #fff;
border-bottom: 1px solid #e1dddd;
border-right: 1px solid #e1dddd;
overflow: hidden; }
.image-swiper .z-sy8-k1:nth-child(6n) {
border-right: 0; }
.image-swiper .z-sy8-k1 img {
width: 100%;
height: 100%; }
.image-swiper .z-sy8-k1:hover img {
transform: rotateX(360deg);
transition: 0.8s; }
.image-swiper .z-sy8-k1 div {
width: calc(100% + 2px);
height: calc(100% + 2px);
border: 1px solid #e1dddd;
box-sizing: border-box;
position: absolute;
top: -1px;
left: -1px; } }
@media only screen and (max-width: 1439px) and (min-width: 1270px) {
.image-swiper .z-sy8-d1 {
width: 100%; }
.image-swiper .z-sy8-d2 {
width: 100%;
height: 0;
padding-bottom: 33.75%;
overflow: hidden;
position: relative;
background: #f7f7f7; }
.image-swiper .z-sy8-d3 {
width: 96.875%;
height: 86.7284%;
position: absolute;
top: calc((100% - 86.7284%) / 2);
left: calc((100% - 96.875%) / 2);
background: #fff; }
.image-swiper .z-sy8-d4 {
width: 94.6237%;
height: 85.7651%;
position: absolute;
top: calc((100% - 85.7651%) / 2);
left: calc((100% - 94.6237%) / 2);
border: 1px solid #e1dddd;
border-bottom: 0; }
.image-swiper .z-sy8-k1 {
width: 16.6666%;
height: 25%;
position: relative;
box-sizing: border-box;
float: left;
background: #fff;
border-bottom: 1px solid #e1dddd;
border-right: 1px solid #e1dddd;
overflow: hidden; }
.image-swiper .z-sy8-k1:nth-child(6n) {
border-right: 0; }
.image-swiper .z-sy8-k1 img {
width: 100%;
height: 100%; }
.image-swiper .z-sy8-k1:hover img {
transform: rotateX(360deg);
transition: 0.8s; }
.image-swiper .z-sy8-k1 div {
width: calc(100% + 2px);
height: calc(100% + 2px);
border: 1px solid #e1dddd;
box-sizing: border-box;
position: absolute;
top: -1px;
left: -1px; } }
@media only screen and (max-width: 1269px) and (min-width: 1024px) {
.image-swiper .z-sy8-d1 {
width: 100%; }
.image-swiper .z-sy8-d2 {
width: 100%;
height: 0;
padding-bottom: 33.75%;
overflow: hidden;
position: relative;
background: #f7f7f7; }
.image-swiper .z-sy8-d3 {
width: 96.875%;
height: 86.7284%;
position: absolute;
top: calc((100% - 86.7284%) / 2);
left: calc((100% - 96.875%) / 2);
background: #fff; }
.image-swiper .z-sy8-d4 {
width: 94.6237%;
height: 85.7651%;
position: absolute;
top: calc((100% - 85.7651%) / 2);
left: calc((100% - 94.6237%) / 2);
border: 1px solid #e1dddd;
border-bottom: 0; }
.image-swiper .z-sy8-k1 {
width: 16.6666%;
height: 25%;
position: relative;
box-sizing: border-box;
float: left;
background: #fff;
border-bottom: 1px solid #e1dddd;
border-right: 1px solid #e1dddd;
overflow: hidden; }
.image-swiper .z-sy8-k1:nth-child(6n) {
border-right: 0; }
.image-swiper .z-sy8-k1 img {
width: 100%;
height: 100%; }
.image-swiper .z-sy8-k1:active img {
transform: rotateX(360deg);
transition: 0.8s; }
.image-swiper .z-sy8-k1 div {
width: calc(100% + 2px);
height: calc(100% + 2px);
border: 1px solid #e1dddd;
box-sizing: border-box;
position: absolute;
top: -1px;
left: -1px; } }
@media only screen and (max-width: 1023px) {
.image-swiper .z-sy8-d1 {
width: 100%;
background: #f4f4f4; }
.image-swiper .z-sy8-d2 {
width: 100%;
position: relative; }
.image-swiper .z-sy8-d3 {
width: 100%;
position: relative;
background: #fff;
padding: 0.2rem 0; }
.image-swiper .z-sy8-d4 {
width: 100%;
position: relative;
border-top: 1px solid #e1dddd;
box-sizing: border-box; }
.image-swiper .z-sy8-k1 {
width: 33.3333%;
height: 1.06rem;
position: relative;
box-sizing: border-box;
float: left;
background: #fff;
border-bottom: 1px solid #e1dddd;
border-right: 1px solid #e1dddd;
overflow: hidden; }
.image-swiper .z-sy8-k1:nth-child(3n) {
border-right: 0; }
.image-swiper .z-sy8-k1 img {
width: 100%;
height: 100%; }
.image-swiper .z-sy8-k1:active img {
transform: rotateX(360deg);
transition: 0.8s; } }
@media only screen and (min-width: 1440px) {
.image-swiper .z-ft-bu1 {
width: 100%; }
.image-swiper .z-bt1 {
width: 80px;
position: fixed;
top: calc(50% - 40px);
right: 30px;
z-index: 50;
cursor: pointer;
display: none; }
.image-swiper .z-ft-d1 {
width: 100%;
position: relative;
overflow: hidden;
height: 930px; }
.image-swiper .z-ft-d1 > img {
width: 1920px;
position: relative;
margin-left: calc(50% - 960px); }
.image-swiper .z-ft-d2 {
width: 1360px;
height: 750px;
position: absolute;
top: calc(50% - 375px);
left: calc(50% - 680px); }
.image-swiper .z-ft-d3:nth-child(1) {
width: 36.76%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(213, 25, 32, 0.8);
transform: rotateY(90deg);
left: calc(36.76% / 2);
transition: 2s; }
.image-swiper .z-ft-d3on {
transform: rotateY(0deg) !important;
left: 0 !important;
transition: 2s !important; }
.image-swiper .z-ft-d3:nth-child(2) {
width: calc(100% - 36.76%);
height: 100%;
position: absolute;
top: 0;
right: 0;
background: #fff; }
.image-swiper .z-ft-d4 {
width: 12%;
position: absolute;
top: 8%;
right: 8%; }
.image-swiper .z-ft-d5 {
display: none; }
.image-swiper .z-ft-g1 {
font-size: 40px;
line-height: 40px;
color: #fff;
position: absolute;
top: 10.93%;
left: 15%; }
.image-swiper .z-ft-g2 {
font-size: 16px;
line-height: 16px;
color: #fff;
position: absolute;
top: 20.26%;
left: 15%; }
.image-swiper .z-ft-g3 {
position: absolute;
top: 35.73%;
left: 15%; }
.image-swiper .z-ft-g3 div {
font-size: 16px;
line-height: 27px;
color: #fff;
font-weight: lighter; }
.image-swiper .z-ft-g4 {
width: 114px;
position: absolute;
top: 56.8%;
left: 15%; }
.image-swiper .z-ft-g4 img {
width: 100%; }
.image-swiper .z-ft-g4 div {
font-size: 16px;
line-height: 48px;
color: #fff;
text-align: center;
font-weight: lighter; }
.image-swiper .z-ft-g5 {
font-size: 14px;
line-height: 22px;
color: #fff;
font-weight: lighter;
position: absolute;
top: 84.8%;
left: 15%; }
.image-swiper .z-ft-h9 {
position: absolute;
top: 8%;
left: 15.12%;
width: 62.5%; }
.image-swiper .z-ft-h1 {
width: 100%;
height: 48px;
margin-bottom: 6px;
position: relative; }
.image-swiper .z-ft-h2 {
font-size: 16px;
line-height: 48px;
color: #333;
font-weight: bold;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-ft-h3 {
width: calc(100% - 84px);
height: 1px;
background: #d4d3d3;
position: absolute;
bottom: 0;
left: 84px; }
.image-swiper .z-ft-h1 input {
display: block;
border: 0;
outline: none;
background: none;
font-size: 16px;
line-height: 46px;
width: calc(100% - 120px);
height: 46px;
position: absolute;
top: 0;
left: 84px; }
.image-swiper .z-ft-h1:nth-child(4) {
height: 134px; }
.image-swiper .z-ft-h10 {
width: 100%;
position: absolute;
top: 48px;
left: 0; }
.image-swiper .z-ft-h4 {
width: 50%;
height: 20px;
margin-bottom: 28px;
float: left;
position: relative; }
.image-swiper .z-ft-h5 {
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: 0;
cursor: pointer; }
.image-swiper .z-ft-h5 img {
width: 100%;
height: 100%; }
.image-swiper .z-ft-h5 img:last-child {
display: none; }
.image-swiper .z-ft-h4 input {
display: none; }
.image-swiper .z-ft-h6 {
font-size: 14px;
line-height: 20px;
color: #333;
position: absolute;
top: 0;
left: 30px; }
.image-swiper .z-ft-h1:nth-child(5) {
height: 140px; }
.image-swiper .z-ft-h1:nth-child(5) .z-ft-h2 {
line-height: 18px; }
.image-swiper .z-ft-h1:nth-child(5) textarea {
width: calc(100% - 84px);
height: 92px;
border: 1px solid #d4d3d3;
box-sizing: border-box;
position: absolute;
top: 0;
left: 84px;
background: none;
outline: none;
display: block;
resize: none;
font-size: 16px;
line-height: 45px;
color: #333; }
.image-swiper .z-ft-h7 {
font-size: 14px;
line-height: 24px;
color: #d51920;
position: absolute;
top: 104px;
left: 80px; }
.image-swiper .z-ft-h8 {
width: 160px;
height: 46px;
border: 0;
border-radius: 4px;
background: #d51920;
font-size: 14px;
line-height: 46px;
color: #fff;
text-align: center;
margin-left: calc(100% - 160px);
position: relative; }
.image-swiper .z-ft-h8 input {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
border: 0;
outline: none;
opacity: 0; }
.image-swiper .z-fb-bu1 {
display: none; }
.image-swiper .z-fb-d1 {
display: none; } }
@media only screen and (max-width: 1439px) and (min-width: 1270px) {
.image-swiper .z-ft-bu1 {
width: 100%; }
.image-swiper .z-bt1 {
width: 70px;
position: fixed;
top: calc(50% - 35px);
right: 24px;
z-index: 50;
cursor: pointer;
display: none; }
.image-swiper .z-ft-d1 {
width: 100%;
position: relative;
overflow: hidden;
height: 640px; }
.image-swiper .z-ft-d1 > img {
width: 1650px;
position: relative;
margin-left: calc(50% - 825px); }
.image-swiper .z-ft-d2 {
width: 1100px;
height: 540px;
position: absolute;
top: calc(50% - 270px);
left: calc(50% - 550px); }
.image-swiper .z-ft-d3:nth-child(1) {
width: 36.76%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(213, 25, 32, 0.8);
transform: rotateY(90deg);
left: calc(36.76% / 2);
transition: 2s; }
.image-swiper .z-ft-d3on {
transform: rotateY(0deg) !important;
left: 0 !important;
transition: 2s !important; }
.image-swiper .z-ft-d3:nth-child(2) {
width: calc(100% - 36.76%);
height: 100%;
position: absolute;
top: 0;
right: 0;
background: #fff; }
.image-swiper .z-ft-d4 {
width: 12%;
position: absolute;
top: 8%;
right: 8%; }
.image-swiper .z-ft-d5 {
display: none; }
.image-swiper .z-ft-g1 {
font-size: 30px;
line-height: 30px;
color: #fff;
position: absolute;
top: 10.93%;
left: 15%; }
.image-swiper .z-ft-g2 {
font-size: 14px;
line-height: 14px;
color: #fff;
position: absolute;
top: 20.26%;
left: 15%; }
.image-swiper .z-ft-g3 {
position: absolute;
top: 30.73%;
left: 15%; }
.image-swiper .z-ft-g3 div {
font-size: 14px;
line-height: 22px;
color: #fff;
font-weight: lighter; }
.image-swiper .z-ft-g4 {
width: 90px;
position: absolute;
top: 49.8%;
left: 15%; }
.image-swiper .z-ft-g4 img {
width: 100%; }
.image-swiper .z-ft-g4 div {
font-size: 14px;
line-height: 36px;
color: #fff;
text-align: center;
font-weight: lighter; }
.image-swiper .z-ft-g5 {
font-size: 12px;
line-height: 18px;
color: #fff;
font-weight: lighter;
position: absolute;
top: 84.8%;
left: 15%; }
.image-swiper .z-ft-h9 {
position: absolute;
top: 8%;
left: 15.12%;
width: 62.5%; }
.image-swiper .z-ft-h1 {
width: 100%;
height: 40px;
margin-bottom: 4px;
position: relative; }
.image-swiper .z-ft-h2 {
font-size: 14px;
line-height: 40px;
color: #333;
font-weight: bold;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-ft-h3 {
width: calc(100% - 70px);
height: 1px;
background: #d4d3d3;
position: absolute;
bottom: 0;
left: 70px; }
.image-swiper .z-ft-h1 input {
display: block;
border: 0;
outline: none;
background: none;
font-size: 14px;
line-height: 40px;
width: calc(100% - 100px);
height: 38px;
position: absolute;
top: 0;
left: 70px; }
.image-swiper .z-ft-h1:nth-child(4) {
height: 100px; }
.image-swiper .z-ft-h10 {
width: 100%;
position: absolute;
top: 40px;
left: 0; }
.image-swiper .z-ft-h4 {
width: 50%;
height: 16px;
margin-bottom: 20px;
float: left;
position: relative; }
.image-swiper .z-ft-h5 {
width: 16px;
height: 16px;
position: absolute;
top: 0;
left: 0;
cursor: pointer; }
.image-swiper .z-ft-h5 img {
width: 100%;
height: 100%; }
.image-swiper .z-ft-h5 img:last-child {
display: none; }
.image-swiper .z-ft-h4 input {
display: none; }
.image-swiper .z-ft-h6 {
font-size: 12px;
line-height: 16px;
color: #333;
position: absolute;
top: 0;
left: 24px; }
.image-swiper .z-ft-h1:nth-child(5) {
height: 120px; }
.image-swiper .z-ft-h1:nth-child(5) .z-ft-h2 {
line-height: 16px; }
.image-swiper .z-ft-h1:nth-child(5) textarea {
width: calc(100% - 70px);
height: 74px;
border: 1px solid #d4d3d3;
box-sizing: border-box;
position: absolute;
top: 0;
left: 70px;
background: none;
outline: none;
display: block;
resize: none;
font-size: 14px;
line-height: 36px;
color: #333; }
.image-swiper .z-ft-h7 {
font-size: 12px;
line-height: 20px;
color: #d51920;
position: absolute;
top: 80px;
left: 70px; }
.image-swiper .z-ft-h8 {
width: 120px;
height: 36px;
border: 0;
border-radius: 4px;
background: #d51920;
font-size: 14px;
line-height: 36px;
color: #fff;
text-align: center;
margin-left: calc(100% - 120px);
position: relative; }
.image-swiper .z-ft-h8 input {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
border: 0;
outline: none;
opacity: 0; }
.image-swiper .z-fb-bu1 {
display: none; }
.image-swiper .z-fb-d1 {
display: none; } }
@media only screen and (max-width: 1269px) and (min-width: 1024px) {
.image-swiper .z-ft-bu1 {
width: 100%; }
.image-swiper .z-bt1 {
width: 60px;
position: fixed;
top: calc(50% - 30px);
right: 18px;
z-index: 50;
cursor: pointer;
display: none; }
.image-swiper .z-ft-d1 {
width: 100%;
position: relative;
overflow: hidden;
height: 540px; }
.image-swiper .z-ft-d1 > img {
width: 1200px;
position: relative;
margin-left: calc(50% - 600px); }
.image-swiper .z-ft-d2 {
width: 900px;
height: 440px;
position: absolute;
top: calc(50% - 220px);
left: calc(50% - 450px); }
.image-swiper .z-ft-d3:nth-child(1) {
width: 36.76%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(213, 25, 32, 0.8);
transform: rotateY(90deg);
left: calc(36.76% / 2);
transition: 2s; }
.image-swiper .z-ft-d3on {
transform: rotateY(0deg) !important;
left: 0 !important;
transition: 2s !important; }
.image-swiper .z-ft-d3:nth-child(2) {
width: calc(100% - 36.76%);
height: 100%;
position: absolute;
top: 0;
right: 0;
background: #fff; }
.image-swiper .z-ft-d4 {
width: 12%;
position: absolute;
top: 8%;
right: 8%; }
.image-swiper .z-ft-d5 {
display: none; }
.image-swiper .z-ft-g1 {
font-size: 24px;
line-height: 24px;
color: #fff;
position: absolute;
top: 10.93%;
left: 12%; }
.image-swiper .z-ft-g2 {
font-size: 12px;
line-height: 12px;
color: #fff;
position: absolute;
top: 20.26%;
left: 12%; }
.image-swiper .z-ft-g3 {
position: absolute;
top: 25.73%;
left: 12%; }
.image-swiper .z-ft-g3 div {
font-size: 12px;
line-height: 18px;
color: #fff;
font-weight: lighter; }
.image-swiper .z-ft-g4 {
width: 70px;
position: absolute;
top: 43.8%;
left: 12%; }
.image-swiper .z-ft-g4 img {
width: 100%; }
.image-swiper .z-ft-g4 div {
font-size: 12px;
line-height: 24px;
color: #fff;
text-align: center;
font-weight: lighter;
white-space: nowrap; }
.image-swiper .z-ft-g5 {
font-size: 12px;
line-height: 18px;
color: #fff;
font-weight: lighter;
position: absolute;
top: 82.8%;
left: 12%; }
.image-swiper .z-ft-h9 {
position: absolute;
top: 8%;
left: 15.12%;
width: 62.5%; }
.image-swiper .z-ft-h1 {
width: 100%;
height: 40px;
margin-bottom: 4px;
position: relative; }
.image-swiper .z-ft-h2 {
font-size: 12px;
line-height: 30px;
color: #333;
font-weight: bold;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-ft-h3 {
width: calc(100% - 60px);
height: 1px;
background: #d4d3d3;
position: absolute;
bottom: 0;
left: 60px; }
.image-swiper .z-ft-h1 input {
display: block;
border: 0;
outline: none;
background: none;
font-size: 12px;
line-height: 30px;
width: calc(100% - 80px);
height: 30px;
position: absolute;
top: 0;
left: 60px; }
.image-swiper .z-ft-h1:nth-child(4) {
height: 80px; }
.image-swiper .z-ft-h10 {
width: 100%;
position: absolute;
top: 34px;
left: 0; }
.image-swiper .z-ft-h4 {
width: 50%;
height: 12px;
margin-bottom: 16px;
float: left;
position: relative; }
.image-swiper .z-ft-h5 {
width: 12px;
height: 12px;
position: absolute;
top: 0;
left: 0;
cursor: pointer; }
.image-swiper .z-ft-h5 img {
width: 100%;
height: 100%; }
.image-swiper .z-ft-h5 img:last-child {
display: none; }
.image-swiper .z-ft-h4 input {
display: none; }
.image-swiper .z-ft-h6 {
font-size: 12px;
line-height: 12px;
color: #333;
position: absolute;
top: 0;
left: 14px;
white-space: nowrap; }
.image-swiper .z-ft-h1:nth-child(5) {
height: 100px; }
.image-swiper .z-ft-h1:nth-child(5) .z-ft-h2 {
line-height: 14px; }
.image-swiper .z-ft-h1:nth-child(5) textarea {
width: calc(100% - 60px);
height: 62px;
border: 1px solid #d4d3d3;
box-sizing: border-box;
position: absolute;
top: 0;
left: 60px;
background: none;
outline: none;
display: block;
resize: none;
font-size: 12px;
line-height: 30px;
color: #333; }
.image-swiper .z-ft-h7 {
font-size: 12px;
line-height: 16px;
color: #d51920;
position: absolute;
top: 70px;
left: 60px; }
.image-swiper .z-ft-h8 {
width: 100px;
height: 30px;
border: 0;
border-radius: 4px;
background: #d51920;
font-size: 12px;
line-height: 30px;
color: #fff;
text-align: center;
margin-left: calc(100% - 100px);
position: relative; }
.image-swiper .z-ft-h8 input {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
border: 0;
outline: none;
opacity: 0; }
.image-swiper .z-fb-bu1 {
display: none; }
.image-swiper .z-fb-d1 {
display: none; } }
@media only screen and (max-width: 1023px) {
.image-swiper .z-ft-bu1 {
width: 100%; }
.image-swiper .z-bt1 {
width: 0.8rem;
position: fixed;
top: calc(50% - 0.4rem);
right: 0.24rem;
z-index: 50;
display: none; }
.image-swiper .z-ft-d1 {
width: 100%;
position: relative;
overflow: hidden;
height: 10.44rem; }
.image-swiper .z-ft-d1 > img {
height: 100%;
position: relative;
margin-left: -80%; }
.image-swiper .z-ft-d2 {
width: calc(100% - 1.2rem);
height: 7.62rem;
position: absolute;
top: calc(0.98rem + 0.88rem);
left: 0.6rem; }
.image-swiper .z-ft-d3:nth-child(1) {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(213, 25, 32, 0.8); }
.image-swiper .z-ft-d3:nth-child(2) {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
background: rgba(255, 255, 255, 0.8);
display: none; }
.image-swiper .z-ft-d4 {
width: 0.9rem;
position: absolute;
top: 0.4rem;
right: 0.4rem; }
.image-swiper .z-ft-d5 {
width: calc(100% - 1.2rem);
height: 0.88rem;
position: absolute;
top: 0.98rem;
left: 0.6rem; }
.image-swiper .z-ft-d5 div:nth-child(1) {
background: #d51920;
font-size: 0.3rem;
line-height: 0.88rem;
color: #fff;
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%; }
.image-swiper .z-ft-d5 div:nth-child(2) {
background: #fff;
font-size: 0.3rem;
line-height: 0.88rem;
color: #333;
text-align: center;
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%; }
.image-swiper .z-ft-g1 {
font-size: 0.4rem;
line-height: 0.4rem;
color: #fff;
position: absolute;
top: 0.74rem;
left: 0.5rem; }
.image-swiper .z-ft-g2 {
font-size: 0.22rem;
line-height: 0.22rem;
color: #fff;
position: absolute;
top: 1.32rem;
left: 0.5rem; }
.image-swiper .z-ft-g3 {
position: absolute;
top: 2.14rem;
left: 0.5rem; }
.image-swiper .z-ft-g3 div {
font-size: 0.22rem;
line-height: 0.36rem;
color: #fff;
font-weight: lighter; }
.image-swiper .z-ft-g4 {
width: 1.14rem;
position: absolute;
top: 4.18rem;
left: 0.5rem; }
.image-swiper .z-ft-g4 img {
width: 100%; }
.image-swiper .z-ft-g4 div {
font-size: 0.22rem;
line-height: 0.48rem;
color: #fff;
text-align: center;
font-weight: lighter;
white-space: nowrap; }
.image-swiper .z-ft-g5 {
font-size: 0.22rem;
line-height: 0.32rem;
color: #fff;
font-weight: lighter;
position: absolute;
top: 6.24rem;
left: 0.5rem; }
.image-swiper .z-ft-h9 {
position: absolute;
top: 0.24rem;
left: 0.5rem;
width: calc(100% - 1rem); }
.image-swiper .z-ft-h1 {
height: 0.54rem;
margin-bottom: 0.12rem;
position: relative; }
.image-swiper .z-ft-h2 {
font-size: 0.24rem;
line-height: 0.54rem;
color: #333;
font-weight: bold;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-ft-h3 {
width: calc(100% - 1.16rem);
height: 1px;
background: #d4d3d3;
position: absolute;
bottom: 0;
left: 1.16rem; }
.image-swiper .z-ft-h1 input {
display: block;
border: 0;
outline: none;
background: none;
font-size: 0.24rem;
line-height: 0.52rem;
width: calc(100% - 1.26rem);
height: 0.52rem;
position: absolute;
top: 0;
left: 1.16rem; }
.image-swiper .z-ft-h1:nth-child(4) {
height: 2.5rem; }
.image-swiper .z-ft-h10 {
width: 100%;
position: absolute;
top: 0.6rem;
left: 0; }
.image-swiper .z-ft-h4 {
width: 50%;
height: 0.2rem;
margin-bottom: 0.3rem;
position: relative; }
.image-swiper .z-ft-h5 {
width: 0.2rem;
height: 0.2rem;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-ft-h5 img {
width: 100%;
height: 100%; }
.image-swiper .z-ft-h5 img:last-child {
display: none; }
.image-swiper .z-ft-h4 input {
display: none; }
.image-swiper .z-ft-h6 {
font-size: 0.24rem;
line-height: 0.2rem;
color: #333;
position: absolute;
top: 0;
left: 0.36rem;
white-space: nowrap; }
.image-swiper .z-ft-h1:nth-child(5) {
height: 1.98rem; }
.image-swiper .z-ft-h1:nth-child(5) .z-ft-h2 {
line-height: 0.26rem; }
.image-swiper .z-ft-h1:nth-child(5) textarea {
width: 4.28rem;
height: 1.02rem;
border: 1px solid #d4d3d3;
box-sizing: border-box;
position: absolute;
top: 0;
left: 1.16rem;
background: #fff;
outline: none;
display: block;
resize: none;
font-size: 0.24rem;
line-height: 0.5rem;
color: #333; }
.image-swiper .z-ft-h7 {
font-size: 0.22rem;
line-height: 0.32rem;
color: #d51920;
position: absolute;
top: 1.2rem;
left: 0; }
.image-swiper .z-ft-h8 {
width: 1.6rem;
height: 0.52rem;
border: 0;
border-radius: 0.04rem;
background: #d51920;
font-size: 0.18rem;
line-height: 0.52rem;
color: #fff;
text-align: center;
margin: 0 auto;
position: relative; }
.image-swiper .z-ft-h8 input {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
border: 0;
outline: none;
opacity: 0; }
.image-swiper .z-fb-bu1 {
display: block;
width: 100%;
height: 0.98rem;
background: #d51920; }
.image-swiper .z-fb-d1 {
display: block;
width: 100%;
height: 1.14rem;
background: #d51920;
position: fixed;
bottom: 0;
left: 0;
z-index: 200; }
.image-swiper .z-fb-d2 {
width: 20%;
height: 100%;
position: relative;
float: left; }
.image-swiper .z-fb-d2 img {
width: 0.58rem;
height: 0.58rem;
position: absolute;
top: 0.12rem;
left: calc(50% - 0.29rem); }
.image-swiper .z-fb-d2 > div {
width: 100%;
font-size: 0.22rem;
line-height: 0.22rem;
text-align: center;
color: #fff;
position: absolute;
top: 0.82rem;
left: 0; } }
@media only screen and (min-width: 1440px) {
.image-swiper {
/*.z-lan-d3:hover{background: #d51920;border: 1px solid #d51920;transition: 0.5s;}*/ }
.image-swiper .z-lan-d1 {
width: 70px;
position: fixed;
top: 20%;
right: 0;
background: #fff;
z-index: 160;
box-shadow: 0 0 10px rgba(213, 25, 32, 0.2); }
.image-swiper .z-lan-d2 {
width: 100%;
margin-bottom: 22px; }
.image-swiper .z-lan-d3 {
width: 100%;
height: 70px;
position: relative;
background: #fff;
border: 1px solid #fff;
border-bottom: 1px solid #e2e1e1;
transition: 0.5s;
box-sizing: border-box; }
.image-swiper .z-lan-i1 {
width: 50px;
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 25px); }
.image-swiper .z-lan-k1 {
height: 44px;
padding: 0 20px;
background: #d51920;
font-size: 20px;
line-height: 44px;
color: #fff;
font-family: "din";
position: absolute;
top: calc(50% - 22px);
right: calc(100% + 12px);
display: none; }
.image-swiper .z-lan-k1 span {
white-space: nowrap; }
.image-swiper .z-lan-t1 {
width: 0;
height: 0;
border-left: 9px solid #d51920;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
position: absolute;
left: calc(100% - 1px);
top: calc(50% - 7px); }
.image-swiper .z-lan-l1 {
width: 2px;
height: 40px;
background: #d51920;
margin: 0 auto;
margin-bottom: 5px; }
.image-swiper .z-lan-p1 {
width: 100%;
font-size: 14px;
line-height: 56px;
color: #d51920;
text-align: center;
height: 56px;
background: #fff;
cursor: pointer; }
.image-swiper .z-lan-d3:nth-child(3) .z-lan-k1 {
background: none; }
.image-swiper .z-lan-d3:nth-child(3) .z-lan-k1 img {
width: 110px; } }
@media only screen and (max-width: 1439px) and (min-width: 1270px) {
.image-swiper {
/*.z-lan-d3:hover{background: #d51920;border: 1px solid #d51920;transition: 0.5s;}*/ }
.image-swiper .z-lan-d1 {
width: 60px;
position: fixed;
top: 20%;
right: 0;
background: #fff;
z-index: 160;
box-shadow: 0 0 10px rgba(213, 25, 32, 0.2); }
.image-swiper .z-lan-d2 {
width: 100%;
margin-bottom: 22px; }
.image-swiper .z-lan-d3 {
width: 100%;
height: 60px;
position: relative;
background: #fff;
border: 1px solid #fff;
border-bottom: 1px solid #e2e1e1;
transition: 0.5s;
box-sizing: border-box; }
.image-swiper .z-lan-i1 {
width: 44px;
position: absolute;
top: calc(50% - 22px);
left: calc(50% - 22px); }
.image-swiper .z-lan-k1 {
height: 40px;
padding: 0 16px;
background: #d51920;
font-size: 18px;
line-height: 40px;
color: #fff;
font-family: "din";
position: absolute;
top: calc(50% - 20px);
right: calc(100% + 12px);
display: none; }
.image-swiper .z-lan-k1 span {
white-space: nowrap; }
.image-swiper .z-lan-t1 {
width: 0;
height: 0;
border-left: 9px solid #d51920;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
position: absolute;
left: calc(100% - 1px);
top: calc(50% - 7px); }
.image-swiper .z-lan-l1 {
width: 2px;
height: 32px;
background: #d51920;
margin: 0 auto;
margin-bottom: 5px; }
.image-swiper .z-lan-p1 {
width: 100%;
font-size: 13px;
line-height: 50px;
color: #d51920;
text-align: center;
height: 50px;
background: #fff;
cursor: pointer; }
.image-swiper .z-lan-d3:nth-child(3) .z-lan-k1 {
background: none; }
.image-swiper .z-lan-d3:nth-child(3) .z-lan-k1 img {
width: 100px; } }
@media only screen and (max-width: 1269px) and (min-width: 1024px) {
.image-swiper {
/*.z-lan-d3:hover{background: #d51920;border: 1px solid #d51920;transition: 0.5s;}*/ }
.image-swiper .z-lan-d1 {
width: 50px;
position: fixed;
top: 20%;
right: 0;
background: #fff;
z-index: 160;
box-shadow: 0 0 10px rgba(213, 25, 32, 0.2); }
.image-swiper .z-lan-d2 {
width: 100%;
margin-bottom: 22px; }
.image-swiper .z-lan-d3 {
width: 100%;
height: 50px;
position: relative;
background: #fff;
border: 1px solid #fff;
border-bottom: 1px solid #e2e1e1;
transition: 0.5s;
box-sizing: border-box; }
.image-swiper .z-lan-i1 {
width: 36px;
position: absolute;
top: calc(50% - 18px);
left: calc(50% - 18px); }
.image-swiper .z-lan-k1 {
height: 36px;
padding: 0 12px;
background: #d51920;
font-size: 16px;
line-height: 36px;
color: #fff;
font-family: "din";
position: absolute;
top: calc(50% - 18px);
right: calc(100% + 12px);
display: none; }
.image-swiper .z-lan-k1 span {
white-space: nowrap; }
.image-swiper .z-lan-t1 {
width: 0;
height: 0;
border-left: 9px solid #d51920;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
position: absolute;
left: calc(100% - 1px);
top: calc(50% - 7px); }
.image-swiper .z-lan-l1 {
width: 2px;
height: 24px;
background: #d51920;
margin: 0 auto;
margin-bottom: 5px; }
.image-swiper .z-lan-p1 {
width: 100%;
font-size: 12px;
line-height: 40px;
color: #d51920;
text-align: center;
height: 40px;
background: #fff;
cursor: pointer; }
.image-swiper .z-lan-d3:nth-child(3) .z-lan-k1 {
background: none; }
.image-swiper .z-lan-d3:nth-child(3) .z-lan-k1 img {
width: 90px; } }
@media only screen and (max-width: 1023px) {
.image-swiper .z-lan-d1 {
display: none; } }
.image-swiper .bg1 {
background: -webkit-linear-gradient(left, #ff6d00, #d51920);
background: -o-linear-gradient(right, #ff6d00, #d51920);
background: -moz-linear-gradient(right, #ff6d00, #d51920);
background: linear-gradient(to right, #ff6d00, #d51920); }
@media only screen and (min-width: 1440px) {
.image-swiper .z-cas1-bu1 {
width: 100%;
height: 20px; }
.image-swiper .z-cas1-i1 {
width: 90.625%;
position: relative;
border: 0;
border-radius: 8px;
margin: 0 auto;
margin-bottom: 0.9735%; }
.image-swiper .z-cas1-i1 > img {
position: relative; }
.image-swiper .z-cas1-i2 {
width: 20.1149%;
position: absolute;
top: -48%;
left: 0; }
.image-swiper .z-cas1-i1 .clear {
position: absolute;
top: calc(50% - 18px);
left: 24.3678%;
white-space: nowrap; }
.image-swiper .z-cas1-p1 {
font-size: 32px;
line-height: 36px;
color: #fff;
white-space: nowrap;
float: left;
margin-right: 15px; }
.image-swiper .z-cas1-p2 {
font-size: 24px;
line-height: 36px;
color: #fff;
text-align: center;
height: 36px;
width: 80px;
border: 0;
border-radius: 18px;
float: left; }
.image-swiper .z-cas1-d1 {
width: 90.625%;
position: relative;
padding: 24px 30px;
box-sizing: border-box;
border: 0;
border-radius: 10px;
background: #fff;
margin: 0 auto;
margin-bottom: 0.9735%; }
.image-swiper .z-cas1-d2 {
width: 100%;
height: 72px;
overflow: hidden; }
.image-swiper .z-cas1-d3 {
width: 100%; }
.image-swiper .z-cas1-p3 {
width: 94%; }
.image-swiper .z-cas1-p3 > div:first-child {
font-size: 14px;
line-height: 36px;
color: #333333;
float: left;
width: 52px;
font-weight: lighter; }
.image-swiper .z-cas1-p3 > div:last-child {
font-size: 14px;
line-height: 36px;
color: #666666;
float: right;
width: calc(100% - 52px); }
.image-swiper .z-cas1-p3 > div:last-child span {
display: block;
margin-right: 1.7751%;
font-size: 14px;
line-height: 36px;
color: #666666;
float: left;
transition: 0.5s;
font-weight: lighter; }
.image-swiper .z-cas1-p3 > div:last-child span:hover {
color: #d51920;
transition: 0.5s; }
.image-swiper .z-cas1-bt1 {
width: 66px;
height: 32px;
border: 1px solid #e8e8e8;
border-radius: 5px;
box-sizing: border-box;
position: absolute;
top: 30px;
right: calc(30px + 2.2988%);
font-size: 14px;
line-height: 30px;
color: #666;
text-indent: 8px;
transition: 0.5s;
cursor: pointer; }
.image-swiper .z-cas1-bt1 img {
width: 10px;
position: absolute;
top: calc(50% - 3px);
right: 8px;
transition: 0.5s; }
.image-swiper .z-cas1-bt1on img {
transform: rotateX(180deg);
transition: 0.5s; }
.image-swiper .z-cas1-k1 {
width: 90.625%;
height: 60px;
background: #fff;
border: 8px;
position: relative;
margin: 0 auto;
margin-bottom: 1.5625%;
padding: 16px 30px;
box-sizing: border-box; }
.image-swiper .z-cas1-k2 {
float: left; }
.image-swiper .z-cas1-k2 > div:first-child {
float: left;
font-size: 16px;
line-height: 28px;
color: #333333;
margin-right: 6px;
font-weight: lighter; }
.image-swiper .z-cas1-k2 > div:last-child {
float: left; }
.image-swiper .z-cas1-k2 > div:last-child div {
float: left;
font-size: 14px;
line-height: 28px;
color: #666;
font-weight: lighter;
padding: 0 14px;
height: 28px;
border: 0;
border-radius: 14px;
margin-right: 6px;
transition: 0.5s; }
.image-swiper .z-cas1-k2 > div:last-child div:hover {
background: -webkit-linear-gradient(left, #ff6d00, #d51920);
background: -o-linear-gradient(right, #ff6d00, #d51920);
background: -moz-linear-gradient(right, #ff6d00, #d51920);
background: linear-gradient(to right, #ff6d00, #d51920);
color: #fff;
transition: 0.5s; }
.image-swiper .z-cas1-k2 > div:last-child .bg1 {
color: #fff;
transition: 0.5s; }
.image-swiper .z-cas1-k3 {
float: left;
margin-left: 100px; }
.image-swiper .z-cas1-k3 > div:first-child {
float: left;
font-size: 16px;
line-height: 28px;
color: #333333;
margin-right: 6px;
font-weight: lighter; }
.image-swiper .z-cas1-k3 > .clear {
float: left;
padding-top: 5px; }
.image-swiper .z-cas1-k6 {
width: 28px;
height: 18px;
position: relative;
float: left;
margin-right: 4px; }
.image-swiper .z-cas1-k6 > img {
width: 100%;
height: 100%;
position: relative; }
.image-swiper .z-cas1-k6 div {
width: 17px;
position: absolute;
top: calc(50% - 6px);
left: calc(50% - 8px);
display: none; }
.image-swiper .z-cas1-k4 {
float: right;
height: 100%;
position: absolute;
top: calc(50% - 14px);
right: 0; }
.image-swiper .z-cas1-k5 {
float: left;
font-size: 16px;
line-height: 28px;
color: #666666;
font-weight: lighter;
margin-right: 40px; }
.image-swiper .z-cas1-k5 > span:first-child {
color: #d01119; }
.image-swiper .z-cas1-k5 > span:last-child {
color: #000000; }
.image-swiper .z-cas1-bt2 {
float: left;
width: 8px;
height: 8px;
box-sizing: border-box;
border-right: 0 !important;
border-bottom: 0 !important;
border: 1px solid #666;
position: relative;
top: 9px;
transform: rotate(-45deg);
margin-right: 10px;
cursor: pointer; }
.image-swiper .z-cas1-bt3 {
float: left;
width: 8px;
height: 8px;
box-sizing: border-box;
border-right: 0 !important;
border-bottom: 0 !important;
border: 1px solid #666;
position: relative;
top: 9px;
transform: rotate(135deg);
margin-right: 10px;
cursor: pointer; }
.image-swiper .z-cas1-bt4 {
border: 1px solid #000; }
.image-swiper .z-cas1-g1 {
width: 90.625%;
position: relative;
margin: 0 auto; }
.image-swiper .z-cas1-g2 {
float: left;
width: 31.954%;
position: relative;
border: 0;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background: #fff;
margin-right: 2.069%;
margin-bottom: 2.069%;
box-shadow: 0 0 26px rgba(164, 164, 164, 0.19); }
.image-swiper .z-cas1-g2:nth-child(3n) {
margin-right: 0; }
.image-swiper .z-cas1-i3 {
width: 100%;
height: 0;
padding-bottom: 58.5774%;
position: relative; }
.image-swiper .z-cas1-i3 img {
position: absolute;
top: 0;
left: 0;
transition: 0.5s; }
.image-swiper .z-cas1-g2:hover .z-cas1-i3 img {
transform: scale(1.08);
transition: 0.5s; }
.image-swiper .z-cas1-g3 {
width: calc(100% - 60px);
height: 72px;
border-bottom: 1px solid #eaeaea;
box-sizing: border-box;
margin: 0 auto; }
.image-swiper .z-cas1-g4 {
float: left;
width: 50%;
font-size: 16px;
line-height: 72px;
color: #333333;
font-weight: lighter;
height: 72px; }
.image-swiper .z-cas1-g5 {
float: right;
font-size: 12px;
line-height: 72px;
color: #807474;
font-weight: lighter;
margin-right: 20px; }
.image-swiper .z-cas1-g5 img {
width: 18px;
margin-right: 4px;
display: inline-block;
cursor: pointer; }
.image-swiper .z-cas1-g5 img:nth-child(1) {
display: inline-block; }
.image-swiper .z-cas1-g5 img:nth-child(2) {
display: none; }
.image-swiper .z-cas1-g6 {
float: right;
font-size: 12px;
line-height: 72px;
color: #807474;
font-weight: lighter; }
.image-swiper .z-cas1-g6 img {
width: 13px;
margin-right: 4px;
display: inline-block;
cursor: pointer; }
.image-swiper .z-cas1-g6 img:nth-child(1) {
display: inline-block; }
.image-swiper .z-cas1-g6 img:nth-child(2) {
display: none; }
.image-swiper .z-cas1-q7 {
width: calc(100% - 60px);
height: 72px;
margin: 0 auto; }
.image-swiper .z-cas1-q7 > div:first-child {
float: left;
font-size: 14px;
line-height: 72px;
color: #807474;
font-weight: lighter; }
.image-swiper .z-cas1-q7 > div:first-child span {
color: #c70000; }
.image-swiper .z-cas1-q7 > div:last-child {
float: right;
font-size: 14px;
line-height: 72px;
color: #999999;
font-weight: lighter; }
.image-swiper .z-cas1-g8 {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
opacity: 0;
overflow: hidden;
transition: 0.5s;
background: rgba(213, 25, 32, 0.8); }
.image-swiper .z-cas1-g8 b {
display: block;
position: absolute;
background: #fff; }
.image-swiper .z-cas1-g8 b:nth-child(1) {
width: 1px;
height: 55px;
top: calc(50% - 628px);
left: 50%;
transition: 1s; }
.image-swiper .z-cas1-g8 b:nth-child(2) {
width: 55px;
height: 1px;
top: 50%;
left: calc(50% - 628px);
transition: 1s; }
.image-swiper .z-cas1-g2:hover .z-cas1-g8 b:nth-child(1) {
width: 1px;
height: 55px;
top: calc(50% - 28px);
left: 50%;
transition: 1s; }
.image-swiper .z-cas1-g2:hover .z-cas1-g8 b:nth-child(2) {
width: 55px;
height: 1px;
top: 50%;
left: calc(50% - 28px);
transition: 1s; }
.image-swiper .z-cas1-g2:hover .z-cas1-g8 {
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: 0.5s;
opacity: 1; }
.image-swiper .z-cas1-i4 {
width: 100%;
position: relative; }
.image-swiper .z-cas1-g9 {
width: 148px;
height: 148px;
border: 1px dashed #fff;
border-radius: 50%;
box-sizing: border-box;
position: absolute;
top: 20.8621%;
left: calc(50% - 74px); }
.image-swiper .z-cas1-g9 b {
display: block;
width: 55px;
height: 55px;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
box-sizing: border-box;
transform: rotate(45deg);
position: absolute;
top: calc(50% - 28px);
left: 30px; }
.image-swiper .z-cas1-g10 {
width: 180px;
position: absolute;
top: 69.8276%;
left: calc(50% - 90px); }
.image-swiper .z-cas1-g10 > div {
font-size: 24px;
line-height: 24px;
color: #fff;
font-weight: lighter; }
.image-swiper .z-cas1-g10 > div:nth-child(1) {
float: left; }
.image-swiper .z-cas1-g10 > div:nth-child(2) {
float: right; } }
@media only screen and (max-width: 1439px) and (min-width: 1270px) {
.image-swiper .z-cas1-bu1 {
width: 100%;
height: 20px; }
.image-swiper .z-cas1-i1 {
width: 90.625%;
position: relative;
border: 0;
border-radius: 8px;
margin: 0 auto;
margin-bottom: 0.9735%; }
.image-swiper .z-cas1-i1 > img {
position: relative; }
.image-swiper .z-cas1-i2 {
width: 20.1149%;
position: absolute;
top: -48%;
left: 0; }
.image-swiper .z-cas1-i1 .clear {
position: absolute;
top: calc(50% - 16px);
left: 24.3678%;
white-space: nowrap; }
.image-swiper .z-cas1-p1 {
font-size: 28px;
line-height: 32px;
color: #fff;
white-space: nowrap;
float: left;
margin-right: 15px; }
.image-swiper .z-cas1-p2 {
font-size: 20px;
line-height: 32px;
color: #fff;
text-align: center;
height: 32px;
width: 70px;
border: 0;
border-radius: 16px;
float: left; }
.image-swiper .z-cas1-d1 {
width: 90.625%;
position: relative;
padding: 20px 24px;
box-sizing: border-box;
border: 0;
border-radius: 10px;
background: #fff;
margin: 0 auto;
margin-bottom: 0.9735%; }
.image-swiper .z-cas1-d2 {
width: 100%;
height: 60px;
overflow: hidden; }
.image-swiper .z-cas1-d3 {
width: 100%; }
.image-swiper .z-cas1-p3 {
width: 94%; }
.image-swiper .z-cas1-p3 > div:first-child {
font-size: 13px;
line-height: 30px;
color: #333333;
float: left;
width: 50px;
font-weight: lighter; }
.image-swiper .z-cas1-p3 > div:last-child {
font-size: 13px;
line-height: 30px;
color: #666666;
float: right;
width: calc(100% - 50px); }
.image-swiper .z-cas1-p3 > div:last-child span {
display: block;
margin-right: 1.7751%;
font-size: 13px;
line-height: 30px;
color: #666666;
float: left;
transition: 0.5s;
font-weight: lighter; }
.image-swiper .z-cas1-p3 > div:last-child span:hover {
color: #d51920;
transition: 0.5s; }
.image-swiper .z-cas1-bt1 {
width: 66px;
height: 32px;
border: 1px solid #e8e8e8;
border-radius: 5px;
box-sizing: border-box;
position: absolute;
top: 20px;
right: calc(30px + 2.2988%);
font-size: 13px;
line-height: 28px;
color: #666;
text-indent: 8px;
transition: 0.5s;
cursor: pointer; }
.image-swiper .z-cas1-bt1 img {
width: 10px;
position: absolute;
top: calc(50% - 3px);
right: 8px;
transition: 0.5s; }
.image-swiper .z-cas1-bt1on img {
transform: rotateX(180deg);
transition: 0.5s; }
.image-swiper .z-cas1-k1 {
width: 90.625%;
height: 56px;
background: #fff;
border: 8px;
position: relative;
margin: 0 auto;
margin-bottom: 1.5625%;
padding: 16px 30px;
box-sizing: border-box; }
.image-swiper .z-cas1-k2 {
float: left; }
.image-swiper .z-cas1-k2 > div:first-child {
float: left;
font-size: 14px;
line-height: 24px;
color: #333333;
margin-right: 4px;
font-weight: lighter; }
.image-swiper .z-cas1-k2 > div:last-child {
float: left; }
.image-swiper .z-cas1-k2 > div:last-child div {
float: left;
font-size: 12px;
line-height: 24px;
color: #666;
font-weight: lighter;
padding: 0 12px;
height: 24px;
border: 0;
border-radius: 12px;
margin-right: 4px;
transition: 0.5s; }
.image-swiper .z-cas1-k2 > div:last-child div:hover {
background: -webkit-linear-gradient(left, #ff6d00, #d51920);
background: -o-linear-gradient(right, #ff6d00, #d51920);
background: -moz-linear-gradient(right, #ff6d00, #d51920);
background: linear-gradient(to right, #ff6d00, #d51920);
color: #fff;
transition: 0.5s; }
.image-swiper .z-cas1-k2 > div:last-child .bg1 {
color: #fff;
transition: 0.5s; }
.image-swiper .z-cas1-k3 {
float: left;
margin-left: 80px; }
.image-swiper .z-cas1-k3 > div:first-child {
float: left;
font-size: 14px;
line-height: 24px;
color: #333333;
margin-right: 4px;
font-weight: lighter; }
.image-swiper .z-cas1-k3 > .clear {
float: left;
padding-top: 4px; }
.image-swiper .z-cas1-k6 {
width: 24px;
height: 16px;
position: relative;
float: left;
margin-right: 4px; }
.image-swiper .z-cas1-k6 > img {
width: 100%;
height: 100%;
position: relative; }
.image-swiper .z-cas1-k6 div {
width: 15px;
position: absolute;
top: calc(50% - 6px);
left: calc(50% - 8px);
display: none; }
.image-swiper .z-cas1-k4 {
float: right;
height: 100%;
position: absolute;
top: calc(50% - 12px);
right: 0; }
.image-swiper .z-cas1-k5 {
float: left;
font-size: 14px;
line-height: 24px;
color: #666666;
font-weight: lighter;
margin-right: 30px; }
.image-swiper .z-cas1-k5 > span:first-child {
color: #d01119; }
.image-swiper .z-cas1-k5 > span:last-child {
color: #000000; }
.image-swiper .z-cas1-bt2 {
float: left;
width: 8px;
height: 8px;
box-sizing: border-box;
border-right: 0 !important;
border-bottom: 0 !important;
border: 1px solid #666;
position: relative;
top: 9px;
transform: rotate(-45deg);
margin-right: 10px;
cursor: pointer; }
.image-swiper .z-cas1-bt3 {
float: left;
width: 8px;
height: 8px;
box-sizing: border-box;
border-right: 0 !important;
border-bottom: 0 !important;
border: 1px solid #666;
position: relative;
top: 9px;
transform: rotate(135deg);
margin-right: 10px;
cursor: pointer; }
.image-swiper .z-cas1-bt4 {
border: 1px solid #000; }
.image-swiper .z-cas1-g1 {
width: 90.625%;
position: relative;
margin: 0 auto; }
.image-swiper .z-cas1-g2 {
float: left;
width: 31.954%;
position: relative;
border: 0;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background: #fff;
margin-right: 2.069%;
margin-bottom: 2.069%;
box-shadow: 0 0 26px rgba(164, 164, 164, 0.19); }
.image-swiper .z-cas1-g2:nth-child(3n) {
margin-right: 0; }
.image-swiper .z-cas1-i3 {
width: 100%;
height: 0;
padding-bottom: 58.5774%;
position: relative; }
.image-swiper .z-cas1-i3 img {
position: absolute;
top: 0;
left: 0;
transition: 0.5s; }
.image-swiper .z-cas1-g2:hover .z-cas1-i3 img {
transform: scale(1.08);
transition: 0.5s; }
.image-swiper .z-cas1-g3 {
width: calc(100% - 40px);
height: 60px;
border-bottom: 1px solid #eaeaea;
box-sizing: border-box;
margin: 0 auto; }
.image-swiper .z-cas1-g4 {
float: left;
width: 50%;
font-size: 14px;
line-height: 60px;
color: #333333;
font-weight: lighter;
height: 60px; }
.image-swiper .z-cas1-g5 {
float: right;
font-size: 12px;
line-height: 60px;
color: #807474;
font-weight: lighter;
margin-right: 16px; }
.image-swiper .z-cas1-g5 img {
width: 18px;
margin-right: 4px;
display: inline-block;
cursor: pointer; }
.image-swiper .z-cas1-g5 img:nth-child(1) {
display: inline-block; }
.image-swiper .z-cas1-g5 img:nth-child(2) {
display: none; }
.image-swiper .z-cas1-g6 {
float: right;
font-size: 12px;
line-height: 60px;
color: #807474;
font-weight: lighter; }
.image-swiper .z-cas1-g6 img {
width: 13px;
margin-right: 4px;
display: inline-block;
cursor: pointer; }
.image-swiper .z-cas1-g6 img:nth-child(1) {
display: inline-block; }
.image-swiper .z-cas1-g6 img:nth-child(2) {
display: none; }
.image-swiper .z-cas1-q7 {
width: calc(100% - 40px);
height: 60px;
margin: 0 auto; }
.image-swiper .z-cas1-q7 > div:first-child {
float: left;
font-size: 14px;
line-height: 60px;
color: #807474;
font-weight: lighter; }
.image-swiper .z-cas1-q7 > div:first-child span {
color: #c70000; }
.image-swiper .z-cas1-q7 > div:last-child {
float: right;
font-size: 14px;
line-height: 60px;
color: #999999;
font-weight: lighter; }
.image-swiper .z-cas1-g8 {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
opacity: 0;
overflow: hidden;
transition: 0.5s;
background: rgba(213, 25, 32, 0.8); }
.image-swiper .z-cas1-g8 b {
display: block;
position: absolute;
background: #fff; }
.image-swiper .z-cas1-g8 b:nth-child(1) {
width: 1px;
height: 55px;
top: calc(50% - 628px);
left: 50%;
transition: 1s; }
.image-swiper .z-cas1-g8 b:nth-child(2) {
width: 55px;
height: 1px;
top: 50%;
left: calc(50% - 628px);
transition: 1s; }
.image-swiper .z-cas1-g2:hover .z-cas1-g8 b:nth-child(1) {
width: 1px;
height: 55px;
top: calc(50% - 28px);
left: 50%;
transition: 1s; }
.image-swiper .z-cas1-g2:hover .z-cas1-g8 b:nth-child(2) {
width: 55px;
height: 1px;
top: 50%;
left: calc(50% - 28px);
transition: 1s; }
.image-swiper .z-cas1-g2:hover .z-cas1-g8 {
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: 0.5s;
opacity: 1; }
.image-swiper .z-cas1-i4 {
width: 100%;
position: relative; }
.image-swiper .z-cas1-g9 {
width: 110px;
height: 110px;
border: 1px dashed #fff;
border-radius: 50%;
box-sizing: border-box;
position: absolute;
top: 20.8621%;
left: calc(50% - 55px); }
.image-swiper .z-cas1-g9 b {
display: block;
width: 45px;
height: 45px;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
box-sizing: border-box;
transform: rotate(45deg);
position: absolute;
top: calc(50% - 23px);
left: 20px; }
.image-swiper .z-cas1-g10 {
width: 160px;
position: absolute;
top: 69.8276%;
left: calc(50% - 80px); }
.image-swiper .z-cas1-g10 > div {
font-size: 20px;
line-height: 20px;
color: #fff;
font-weight: lighter; }
.image-swiper .z-cas1-g10 > div:nth-child(1) {
float: left; }
.image-swiper .z-cas1-g10 > div:nth-child(2) {
float: right; } }
@media only screen and (max-width: 1269px) and (min-width: 1024px) {
.image-swiper .z-cas1-bu1 {
width: 100%;
height: 12px; }
.image-swiper .z-cas1-i1 {
width: 90.625%;
position: relative;
border: 0;
border-radius: 8px;
margin: 0 auto;
margin-bottom: 0.9735%; }
.image-swiper .z-cas1-i1 > img {
position: relative; }
.image-swiper .z-cas1-i2 {
width: 20.1149%;
position: absolute;
top: -48%;
left: 0; }
.image-swiper .z-cas1-i1 .clear {
position: absolute;
top: calc(50% - 14px);
left: 24.3678%;
white-space: nowrap; }
.image-swiper .z-cas1-p1 {
font-size: 24px;
line-height: 28px;
color: #fff;
white-space: nowrap;
float: left;
margin-right: 15px; }
.image-swiper .z-cas1-p2 {
font-size: 16px;
line-height: 28px;
color: #fff;
text-align: center;
height: 28px;
width: 60px;
border: 0;
border-radius: 14px;
float: left; }
.image-swiper .z-cas1-d1 {
width: 90.625%;
position: relative;
padding: 20px 24px;
box-sizing: border-box;
border: 0;
border-radius: 10px;
background: #fff;
margin: 0 auto;
margin-bottom: 0.9735%; }
.image-swiper .z-cas1-d2 {
width: 100%;
height: 48px;
overflow: hidden; }
.image-swiper .z-cas1-d3 {
width: 100%; }
.image-swiper .z-cas1-p3 {
width: 94%; }
.image-swiper .z-cas1-p3 > div:first-child {
font-size: 12px;
line-height: 24px;
color: #333333;
float: left;
width: 48px;
font-weight: lighter; }
.image-swiper .z-cas1-p3 > div:last-child {
font-size: 12px;
line-height: 24px;
color: #666666;
float: right;
width: calc(100% - 48px); }
.image-swiper .z-cas1-p3 > div:last-child span {
display: block;
margin-right: 1.7751%;
font-size: 12px;
line-height: 24px;
color: #666666;
float: left;
transition: 0.5s;
font-weight: lighter; }
.image-swiper .z-cas1-p3 > div:last-child span:hover {
color: #d51920;
transition: 0.5s; }
.image-swiper .z-cas1-bt1 {
width: 44px;
height: 20px;
border: 1px solid #e8e8e8;
border-radius: 4px;
box-sizing: border-box;
position: absolute;
top: 24px;
right: calc(20px + 2.2988%);
font-size: 12px;
line-height: 18px;
color: #666;
text-indent: 4px;
transition: 0.5s;
cursor: pointer; }
.image-swiper .z-cas1-bt1 img {
width: 8px;
position: absolute;
top: calc(50% - 2px);
right: 4px;
transition: 0.5s; }
.image-swiper .z-cas1-bt1on img {
transform: rotateX(180deg);
transition: 0.5s; }
.image-swiper .z-cas1-k1 {
width: 90.625%;
height: 48px;
background: #fff;
border: 8px;
position: relative;
margin: 0 auto;
margin-bottom: 1.5625%;
padding: 12px 24px;
box-sizing: border-box; }
.image-swiper .z-cas1-k2 {
float: left; }
.image-swiper .z-cas1-k2 > div:first-child {
float: left;
font-size: 12px;
line-height: 24px;
color: #333333;
margin-right: 4px;
font-weight: lighter; }
.image-swiper .z-cas1-k2 > div:last-child {
float: left; }
.image-swiper .z-cas1-k2 > div:last-child div {
float: left;
font-size: 12px;
line-height: 24px;
color: #666;
font-weight: lighter;
padding: 0 12px;
height: 24px;
border: 0;
border-radius: 12px;
margin-right: 4px;
transition: 0.5s; }
.image-swiper .z-cas1-k2 > div:last-child div:hover {
background: -webkit-linear-gradient(left, #ff6d00, #d51920);
background: -o-linear-gradient(right, #ff6d00, #d51920);
background: -moz-linear-gradient(right, #ff6d00, #d51920);
background: linear-gradient(to right, #ff6d00, #d51920);
color: #fff;
transition: 0.5s; }
.image-swiper .z-cas1-k2 > div:last-child .bg1 {
color: #fff;
transition: 0.5s; }
.image-swiper .z-cas1-k3 {
float: left;
margin-left: 40px; }
.image-swiper .z-cas1-k3 > div:first-child {
float: left;
font-size: 12px;
line-height: 24px;
color: #333333;
margin-right: 2px;
font-weight: lighter; }
.image-swiper .z-cas1-k3 > .clear {
float: left;
padding-top: 7px; }
.image-swiper .z-cas1-k6 {
width: 20px;
height: 12px;
position: relative;
float: left;
margin-right: 2px; }
.image-swiper .z-cas1-k6 > img {
width: 100%;
height: 100%;
position: relative; }
.image-swiper .z-cas1-k6 div {
width: 12px;
position: absolute;
top: calc(50% - 4px);
left: calc(50% - 6px);
display: none; }
.image-swiper .z-cas1-k4 {
float: right;
height: 100%;
position: absolute;
top: calc(50% - 12px);
right: 0; }
.image-swiper .z-cas1-k5 {
float: left;
font-size: 12px;
line-height: 24px;
color: #666666;
font-weight: lighter;
margin-right: 30px; }
.image-swiper .z-cas1-k5 > span:first-child {
color: #d01119; }
.image-swiper .z-cas1-k5 > span:last-child {
color: #000000; }
.image-swiper .z-cas1-bt2 {
float: left;
width: 8px;
height: 8px;
box-sizing: border-box;
border-right: 0 !important;
border-bottom: 0 !important;
border: 1px solid #666;
position: relative;
top: 9px;
transform: rotate(-45deg);
margin-right: 10px;
cursor: pointer; }
.image-swiper .z-cas1-bt3 {
float: left;
width: 8px;
height: 8px;
box-sizing: border-box;
border-right: 0 !important;
border-bottom: 0 !important;
border: 1px solid #666;
position: relative;
top: 9px;
transform: rotate(135deg);
margin-right: 10px;
cursor: pointer; }
.image-swiper .z-cas1-bt4 {
border: 1px solid #000; }
.image-swiper .z-cas1-g1 {
width: 90.625%;
position: relative;
margin: 0 auto; }
.image-swiper .z-cas1-g2 {
float: left;
width: 31.954%;
position: relative;
border: 0;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background: #fff;
margin-right: 2.069%;
margin-bottom: 2.069%;
box-shadow: 0 0 26px rgba(164, 164, 164, 0.19); }
.image-swiper .z-cas1-g2:nth-child(3n) {
margin-right: 0; }
.image-swiper .z-cas1-i3 {
width: 100%;
height: 0;
padding-bottom: 58.5774%;
position: relative; }
.image-swiper .z-cas1-i3 img {
position: absolute;
top: 0;
left: 0;
transition: 0.5s; }
.image-swiper .z-cas1-g2:active .z-cas1-i3 img {
transform: scale(1.08);
transition: 0.5s; }
.image-swiper .z-cas1-g3 {
width: calc(100% - 30px);
height: 48px;
border-bottom: 1px solid #eaeaea;
box-sizing: border-box;
margin: 0 auto; }
.image-swiper .z-cas1-g4 {
float: left;
width: 50%;
font-size: 12px;
line-height: 48px;
color: #333333;
font-weight: lighter;
height: 48px; }
.image-swiper .z-cas1-g5 {
float: right;
font-size: 12px;
line-height: 48px;
color: #807474;
font-weight: lighter;
margin-right: 16px; }
.image-swiper .z-cas1-g5 img {
width: 18px;
margin-right: 4px;
display: inline-block;
cursor: pointer; }
.image-swiper .z-cas1-g5 img:nth-child(1) {
display: inline-block; }
.image-swiper .z-cas1-g5 img:nth-child(2) {
display: none; }
.image-swiper .z-cas1-g6 {
float: right;
font-size: 12px;
line-height: 48px;
color: #807474;
font-weight: lighter; }
.image-swiper .z-cas1-g6 img {
width: 13px;
margin-right: 4px;
display: inline-block;
cursor: pointer; }
.image-swiper .z-cas1-g6 img:nth-child(1) {
display: inline-block; }
.image-swiper .z-cas1-g6 img:nth-child(2) {
display: none; }
.image-swiper .z-cas1-q7 {
width: calc(100% - 30px);
height: 48px;
margin: 0 auto; }
.image-swiper .z-cas1-q7 > div:first-child {
float: left;
font-size: 12px;
line-height: 48px;
color: #807474;
font-weight: lighter; }
.image-swiper .z-cas1-q7 > div:first-child span {
color: #c70000; }
.image-swiper .z-cas1-q7 > div:last-child {
float: right;
font-size: 14px;
line-height: 60px;
color: #999999;
font-weight: lighter; }
.image-swiper .z-cas1-g8 {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
opacity: 0;
overflow: hidden;
transition: 0.5s;
background: rgba(213, 25, 32, 0.8); }
.image-swiper .z-cas1-g8 b {
display: block;
position: absolute;
background: #fff; }
.image-swiper .z-cas1-g8 b:nth-child(1) {
width: 1px;
height: 55px;
top: calc(50% - 628px);
left: 50%;
transition: 1s; }
.image-swiper .z-cas1-g8 b:nth-child(2) {
width: 55px;
height: 1px;
top: 50%;
left: calc(50% - 628px);
transition: 1s; }
.image-swiper .z-cas1-g2:hover .z-cas1-g8 b:nth-child(1) {
width: 1px;
height: 55px;
top: calc(50% - 28px);
left: 50%;
transition: 1s; }
.image-swiper .z-cas1-g2:hover .z-cas1-g8 b:nth-child(2) {
width: 55px;
height: 1px;
top: 50%;
left: calc(50% - 28px);
transition: 1s; }
.image-swiper .z-cas1-g2:active .z-cas1-g8 {
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: 0.5s;
opacity: 1; }
.image-swiper .z-cas1-i4 {
width: 100%;
position: relative; }
.image-swiper .z-cas1-g9 {
width: 110px;
height: 110px;
border: 1px dashed #fff;
border-radius: 50%;
box-sizing: border-box;
position: absolute;
top: 20.8621%;
left: calc(50% - 55px); }
.image-swiper .z-cas1-g9 b {
display: block;
width: 45px;
height: 45px;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
box-sizing: border-box;
transform: rotate(45deg);
position: absolute;
top: calc(50% - 23px);
left: 20px; }
.image-swiper .z-cas1-g10 {
width: 160px;
position: absolute;
top: 69.8276%;
left: calc(50% - 80px); }
.image-swiper .z-cas1-g10 > div {
font-size: 20px;
line-height: 20px;
color: #fff;
font-weight: lighter; }
.image-swiper .z-cas1-g10 > div:nth-child(1) {
float: left; }
.image-swiper .z-cas1-g10 > div:nth-child(2) {
float: right; } }
@media only screen and (max-width: 1023px) {
.image-swiper .z-cas1-bu1 {
display: none; }
.image-swiper .z-cas1-i1 {
display: none; }
.image-swiper .z-cas1-d1 {
display: none; }
.image-swiper .z-cas1-d2 {
width: 100%;
height: 48px;
overflow: hidden; }
.image-swiper .z-cas1-d3 {
width: 100%; }
.image-swiper .z-cas1-p3 {
width: 94%; }
.image-swiper .z-cas1-p3 > div:first-child {
font-size: 12px;
line-height: 24px;
color: #333333;
float: left;
width: 48px;
font-weight: lighter; }
.image-swiper .z-cas1-p3 > div:last-child {
font-size: 12px;
line-height: 24px;
color: #666666;
float: right;
width: calc(100% - 48px); }
.image-swiper .z-cas1-p3 > div:last-child span {
display: block;
margin-right: 1.7751%;
font-size: 12px;
line-height: 24px;
color: #666666;
float: left;
transition: 0.5s;
font-weight: lighter; }
.image-swiper .z-cas1-p3 > div:last-child span:hover {
color: #d51920;
transition: 0.5s; }
.image-swiper .z-cas1-bt1 {
width: 44px;
height: 20px;
border: 1px solid #e8e8e8;
border-radius: 4px;
box-sizing: border-box;
position: absolute;
top: 24px;
right: calc(20px + 2.2988%);
font-size: 12px;
line-height: 18px;
color: #666;
text-indent: 4px;
transition: 0.5s;
cursor: pointer; }
.image-swiper .z-cas1-bt1 img {
width: 8px;
position: absolute;
top: calc(50% - 2px);
right: 4px;
transition: 0.5s; }
.image-swiper .z-cas1-bt1on img {
transform: rotateX(180deg);
transition: 0.5s; }
.image-swiper .z-cas1-k1 {
display: none; }
.image-swiper .z-cas1-g1 {
width: calc(100% - 0.48rem);
position: relative;
margin: 0 auto; }
.image-swiper .z-cas1-g2 {
width: 100%;
position: relative;
border: 0; }
.image-swiper .z-cas1-i3 {
width: 100%;
position: relative;
padding: 0.1rem;
box-sizing: border-box;
border: 0;
border-radius: 0.1rem;
background: #fff;
box-shadow: 0 0 0.26rem rgba(164, 164, 164, 0.19); }
.image-swiper .z-cas1-i3 img {
position: relative;
width: 100%; }
.image-swiper .z-cas1-g3 {
width: 100%;
height: 1.68rem;
position: relative; }
.image-swiper .z-cas1-g4 {
width: 100%;
font-size: 0.3rem;
line-height: 0.4rem;
color: #333333;
text-align: center;
font-weight: lighter;
height: 0.4rem;
position: absolute;
top: 0.38rem;
left: 0; }
.image-swiper .z-cas1-g5 {
font-size: 0.24rem;
line-height: 0.4rem;
color: #807474;
font-weight: lighter;
position: absolute;
top: 0.96rem;
left: 1.34rem; }
.image-swiper .z-cas1-g5 img {
width: 0.32rem;
margin-right: 0.15rem;
display: inline-block; }
.image-swiper .z-cas1-g5 img:nth-child(1) {
display: inline-block; }
.image-swiper .z-cas1-g5 img:nth-child(2) {
display: none; }
.image-swiper .z-cas1-g6 {
float: right;
font-size: 0.24rem;
line-height: 0.4rem;
color: #807474;
font-weight: lighter;
position: absolute;
top: 0.96rem;
left: 2.64rem; }
.image-swiper .z-cas1-g6 img {
width: 0.24rem;
margin-right: 0.15rem;
display: inline-block; }
.image-swiper .z-cas1-g6 img:nth-child(1) {
display: inline-block; }
.image-swiper .z-cas1-g6 img:nth-child(2) {
display: none; }
.image-swiper .z-cas1-q7 {
position: absolute;
bottom: 0;
right: 0; }
.image-swiper .z-cas1-q7 > div:first-child {
display: none; }
.image-swiper .z-cas1-q7 > div:last-child {
font-size: 0.24rem;
line-height: 0.6rem;
color: #807474;
font-weight: lighter;
position: absolute;
bottom: 0.24rem;
right: 1.4rem;
white-space: nowrap; }
.image-swiper .z-cas1-g8 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
overflow: hidden;
background: rgba(213, 25, 32, 0); }
.image-swiper .z-cas1-g8 b {
display: none; }
.image-swiper .z-cas1-i4 {
width: 100%;
position: relative;
display: none; }
.image-swiper .z-cas1-g9 {
width: 110px;
height: 110px;
border: 1px dashed #fff;
border-radius: 50%;
box-sizing: border-box;
position: absolute;
top: 20.8621%;
left: calc(50% - 55px); }
.image-swiper .z-cas1-g9 b {
display: block;
width: 45px;
height: 45px;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
box-sizing: border-box;
transform: rotate(45deg);
position: absolute;
top: calc(50% - 23px);
left: 20px; }
.image-swiper .z-cas1-g10 {
width: 160px;
position: absolute;
top: 69.8276%;
left: calc(50% - 80px); }
.image-swiper .z-cas1-g10 > div {
font-size: 20px;
line-height: 20px;
color: #fff;
font-weight: lighter; }
.image-swiper .z-cas1-g10 > div:nth-child(1) {
float: left; }
.image-swiper .z-cas1-g10 > div:nth-child(2) {
float: right; } }
@media only screen and (min-width: 1024px) {
.image-swiper .z-cas1-z1 {
display: none; }
.image-swiper .z-cas1-y0 {
display: none; } }
@media only screen and (max-width: 1023px) {
.image-swiper .z-cas1-z1 {
width: 100%;
height: 1.87rem;
position: relative; }
.image-swiper .z-cas1-z1 img {
position: relative; }
.image-swiper .z-cas1-z2 {
width: 100%;
font-size: 0.3rem;
line-height: 0.36rem;
color: #fff;
text-align: center;
position: absolute;
top: 0.4rem;
left: 0; }
.image-swiper .z-cas1-z3 {
width: 1.1rem;
height: 0.5rem;
border: 0;
border-radius: 0.25rem;
font-size: 0.34rem;
line-height: 0.5rem;
color: #fff;
text-align: center;
position: absolute;
top: 1.1rem;
left: calc(50% - 0.55rem); }
.image-swiper .z-cas1-y0 {
width: 100%;
background: #fff;
position: relative;
z-index: 10;
margin-bottom: 0.1rem; }
.image-swiper .z-cas1-y1 {
width: calc(100% - 0.48rem);
height: 0.98rem;
border-bottom: 1px solid #dedede;
position: relative;
margin: 0 auto; }
.image-swiper .z-cas1-y2 {
width: 0.9rem;
height: 0.98rem;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-cas1-y2 > div {
position: relative;
font-size: 0.28rem;
line-height: 0.98rem;
color: #333333; }
.image-swiper .z-cas1-y2 > b {
width: 0;
height: 0;
border-top: 0.12rem solid #333;
border-left: 0.11rem solid transparent;
border-right: 0.11rem solid transparent;
position: absolute;
top: calc(50% - 0.06rem);
right: 0; }
.image-swiper .z-cas1-y2on > b {
transform: rotateX(180deg); }
.image-swiper .z-cas1-y3 {
width: 0.9rem;
height: 0.98rem;
position: absolute;
top: 0;
left: 1.98rem; }
.image-swiper .z-cas1-y3 > div {
position: relative;
font-size: 0.28rem;
line-height: 0.98rem;
color: #333333; }
.image-swiper .z-cas1-y3 > b {
width: 0;
height: 0;
border-top: 0.12rem solid #333;
border-left: 0.11rem solid transparent;
border-right: 0.11rem solid transparent;
position: absolute;
top: calc(50% - 0.06rem);
right: 0; }
.image-swiper .z-cas1-y3on > b {
transform: rotateX(180deg); }
.image-swiper .z-cas1-u1 {
display: none;
position: absolute;
width: calc(100% + 0.48rem);
left: -0.24rem;
top: 200%;
background: #fff; }
.image-swiper .z-cas1-u2 {
display: none;
position: absolute;
width: calc(100% + 0.48rem);
left: -0.24rem;
top: 200%;
background: #fff; }
.image-swiper .z-cas1-y0 li {
height: 0.98rem;
font-size: 0.28rem;
line-height: 0.98rem;
color: #333;
text-indent: 0.24rem;
border-bottom: 1px dashed #999; }
.image-swiper .z-cas1-y0 li:last-child {
border: 0; }
.image-swiper .z-cas1-k4 {
position: absolute;
top: calc(50% - 0.12rem);
right: 0.24rem; }
.image-swiper .z-cas1-k5 {
float: left;
font-size: 0.24rem;
line-height: 0.24rem;
color: #666666;
font-weight: lighter;
margin-right: 0.44rem; }
.image-swiper .z-cas1-k5 > span:first-child {
color: #d01119; }
.image-swiper .z-cas1-k5 > span:last-child {
color: #000000; }
.image-swiper .z-cas1-bt2 {
float: left;
width: 0.12rem;
height: 0.12rem;
box-sizing: border-box;
border-right: 0 !important;
border-bottom: 0 !important;
border: 1px solid #666;
position: relative;
top: 0.06rem;
transform: rotate(-45deg);
margin-right: 10px;
cursor: pointer; }
.image-swiper .z-cas1-bt3 {
float: left;
width: 0.12rem;
height: 0.12rem;
box-sizing: border-box;
border-right: 0 !important;
border-bottom: 0 !important;
border: 1px solid #666;
position: relative;
top: 0.06rem;
transform: rotate(135deg);
margin-right: 10px;
cursor: pointer; }
.image-swiper .z-cas1-bt4 {
border: 1px solid #000; }
.image-swiper .z-cas1-x1 {
width: calc(100% - 0.48rem);
height: 0.98rem;
border-bottom: 1px solid #dedede;
position: relative;
margin: 0 auto; }
.image-swiper .z-cas1-x2 {
width: 0.9rem;
height: 0.98rem;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-cas1-x2 > div {
position: relative;
font-size: 0.28rem;
line-height: 0.98rem;
color: #d51920; }
.image-swiper .z-cas1-x2 > b {
width: 0;
height: 0;
border-top: 0.12rem solid #d51920;
border-left: 0.11rem solid transparent;
border-right: 0.11rem solid transparent;
position: absolute;
top: calc(50% - 0.06rem);
right: 0; }
.image-swiper .z-cas1-x2on > b {
transform: rotateX(180deg); }
.image-swiper .z-cas1-u3 {
display: none;
position: absolute;
width: calc(100% + 0.48rem);
left: -0.24rem;
top: 100%;
background: #fff; }
.image-swiper .z-cas1-x3 {
position: absolute;
top: 0;
right: 0.24rem; }
.image-swiper .z-cas1-x4 {
float: left;
font-size: 0.28rem;
line-height: 0.98rem;
color: #333333;
margin-right: 0.1rem; }
.image-swiper .z-cas1-x5 {
float: left;
padding-top: 0.4rem; }
.image-swiper .z-cas1-x5 > .i100 {
width: 0.28rem;
float: left;
margin-right: 0.38rem;
position: relative; }
.image-swiper .z-cas1-x5 > .i100:last-child {
margin-right: 0; }
.image-swiper .z-cas1-x5 > .i100 .i100 {
width: 0.17rem;
position: absolute;
top: 0.04rem;
left: 0.04rem;
display: none; } }
@media only screen and (min-width: 1440px) {
.image-swiper .z-label-d1 {
width: 100%;
height: 36px;
text-align: center;
padding-top: 4.4271%;
margin-bottom: 4.4271%; }
.image-swiper .z-label-d1 a {
display: inline-block;
height: 36px;
padding: 0 10px;
font-size: 12px;
line-height: 36px;
color: #939292;
background: #d1d1d1;
transition: 0.5s;
margin: 0 2px; }
.image-swiper .z-label-d1 a:hover {
color: #fff;
background: #d51920;
transition: 0.5s; }
.image-swiper .z-label-d2 {
display: inline-block; }
.image-swiper .z-label-d1 .select {
color: #fff;
background: #d51920;
transition: 0.5s; }
.image-swiper .z-label-d2 span {
font-size: 12px;
line-height: 36px;
color: #939292; } }
@media only screen and (max-width: 1439px) and (min-width: 1270px) {
.image-swiper .z-label-d1 {
width: 100%;
height: 36px;
text-align: center;
padding-top: 4.4271%;
margin-bottom: 4.4271%; }
.image-swiper .z-label-d1 a {
display: inline-block;
height: 36px;
padding: 0 10px;
font-size: 12px;
line-height: 36px;
color: #939292;
background: #d1d1d1;
transition: 0.5s;
margin: 0 2px; }
.image-swiper .z-label-d1 a:hover {
color: #fff;
background: #d51920;
transition: 0.5s; }
.image-swiper .z-label-d2 {
display: inline-block; }
.image-swiper .z-label-d1 .select {
color: #fff;
background: #d51920;
transition: 0.5s; }
.image-swiper .z-label-d2 span {
font-size: 12px;
line-height: 36px;
color: #939292; } }
@media only screen and (max-width: 1269px) and (min-width: 1024px) {
.image-swiper .z-label-d1 {
width: 100%;
height: 36px;
text-align: center;
padding-top: 4.4271%;
margin-bottom: 4.4271%; }
.image-swiper .z-label-d1 a {
display: inline-block;
height: 36px;
padding: 0 10px;
font-size: 12px;
line-height: 36px;
color: #939292;
background: #d1d1d1;
transition: 0.5s;
margin: 0 2px; }
.image-swiper .z-label-d1 a:hover {
color: #fff;
background: #d51920;
transition: 0.5s; }
.image-swiper .z-label-d2 {
display: inline-block; }
.image-swiper .z-label-d1 .select {
color: #fff;
background: #d51920;
transition: 0.5s; }
.image-swiper .z-label-d2 span {
font-size: 12px;
line-height: 36px;
color: #939292; } }
@media only screen and (max-width: 1023px) {
.image-swiper .z-label-d1 {
width: 100%;
height: 0.6rem;
text-align: center;
padding-top: 0.25rem;
margin-bottom: 0.25rem; }
.image-swiper .z-label-d1 a {
display: inline-block;
height: 0.6rem;
padding: 0 0.2rem;
font-size: 0.24rem;
line-height: 0.6rem;
color: #939292;
background: #d1d1d1;
transition: 0.5s;
margin: 0 0.02rem; }
.image-swiper .z-label-d1 a:hover {
color: #fff;
background: #d51920;
transition: 0.5s; }
.image-swiper .z-label-d2 {
display: inline-block; }
.image-swiper .z-label-d1 .select {
color: #fff;
background: #d51920;
transition: 0.5s; }
.image-swiper .z-label-d2 span {
font-size: 0.24rem;
line-height: 0.6rem;
color: #939292; } }
@media only screen and (min-width: 1440px) {
.image-swiper .z-sof-ach1 {
height: 0;
position: relative;
top: -100px; }
.image-swiper .z-sof-ban1 {
width: 100%;
height: 0;
padding-bottom: 43.2291%;
position: relative; }
.image-swiper .z-sof-ban1 > img {
position: absolute;
top: 0;
left: 0;
width: 100%; }
.image-swiper .z-sof-ban2 {
width: 8.0729%;
position: absolute;
top: 12.6506%;
right: 17.96875%; }
.image-swiper .z-sof-ban3 {
width: 9.6875%;
position: absolute;
top: 69.8795%;
left: 25.78125%; }
.image-swiper .z-sof-ban4 {
width: 34.6354%;
position: absolute;
top: 16.2651%;
left: 13.28125%; }
.image-swiper .z-sof-ban5 {
width: 35.2083%;
position: absolute;
top: 29.2771%;
right: 12.9167%; }
.image-swiper .z-sof-ban6 {
width: 8.5417%;
position: absolute;
top: 49.759%;
right: 42.1875%; }
.image-swiper .z-sof-ban7 {
width: 18.6979%;
position: absolute;
top: 56.6265%;
right: 29.1667%; }
.image-swiper .z-sof-ban8 {
width: 35.1042%;
position: absolute;
top: 66.2651%;
right: 13.0208%; }
.image-swiper .z-sof-e1 {
width: 75%;
margin: 0 auto;
height: 0;
padding-bottom: 15.78125%;
position: relative; }
.image-swiper .z-sof-e2 {
font-size: 40px;
line-height: 40px;
color: #333333;
font-family: "pfsc";
position: absolute;
top: 27.7228%;
left: 0; }
.image-swiper .z-sof-e3 {
font-size: 24px;
line-height: 24px;
color: #999999;
font-family: "pfsc";
position: absolute;
top: 44.2244%;
left: 0;
text-transform: uppercase; }
.image-swiper .z-sof-e4 {
font-size: 20px;
line-height: 36px;
color: #333333;
font-weight: lighter;
position: absolute;
top: 62.0462%;
left: 0; }
.image-swiper .z-sof-e5 {
position: absolute;
top: 47.1947%;
right: 0; }
.image-swiper .z-sof-e5 > img {
width: 18px;
float: left;
margin-right: 14px; }
.image-swiper .z-sof-e5 > div {
float: left;
font-size: 16px;
line-height: 25px;
color: #666666;
white-space: nowrap; }
.image-swiper .z-sof-e6 {
width: 100%;
position: absolute;
bottom: 0;
left: 0; }
.image-swiper .z-sof-e7 {
width: 100%;
height: 1px;
background: #e0e0e0;
position: absolute;
bottom: 0;
left: 0; }
.image-swiper .z-sof-e8 {
height: 56px;
position: absolute;
bottom: -1px;
right: 0; }
.image-swiper .z-sof-e8 > div {
float: left;
height: 100%;
margin-right: 24px; }
.image-swiper .z-sof-e8 > div:last-child {
margin-right: 0; }
.image-swiper .z-sof-e8 > div > b {
width: 6px;
height: 6px;
background: #d51920;
display: block;
position: relative;
top: calc(50% - 3px);
margin-right: 14px;
float: left; }
.image-swiper .z-sof-e8 > div > div {
float: left;
position: relative;
height: 100%;
font-size: 18px;
line-height: 56px;
color: #666666;
font-weight: lighter;
position: relative; }
.image-swiper .z-sof-e8 > div > div b {
display: block;
height: 3px;
background: #d51920;
position: absolute;
bottom: 0;
left: 50%;
width: 0;
transition: 0.5s; }
.image-swiper .z-sof-e8 > div > div:hover b {
width: 100%;
left: 0;
transition: 0.5s; }
.image-swiper .z-sof-e8 > .z-sof-e8don > div b {
width: 100%;
left: 0;
transition: 0.5s; }
.image-swiper .z-sof-f1 {
width: 75%;
padding-top: 2.0833%;
padding-bottom: 3.6458%;
margin: 0 auto; }
.image-swiper .z-sof-f2 {
font-size: 30px;
line-height: 30px;
color: #000000;
margin-left: 30px;
margin-bottom: 22px; }
.image-swiper .z-sof-f3 {
width: 46px;
height: 3px;
background: #d51920;
margin-bottom: 22px;
margin-left: 30px; }
.image-swiper .z-sof-f4 {
font-size: 20px;
line-height: 20px;
color: #5c5c5c;
margin-left: 30px;
margin-bottom: 44px;
font-weight: lighter; }
.image-swiper .z-sof-f5 {
width: 100%;
font-size: 16px;
line-height: 34px;
color: #666666;
font-weight: lighter; }
.image-swiper .z-sof-g0 {
display: none; }
.image-swiper .z-sof-g1 {
width: 75%;
margin: 0 auto; }
.image-swiper .z-sof-g2 {
width: calc(50% - 8px);
position: relative;
height: 0;
border: 1px solid #e6e6e6;
border-radius: 10px;
box-sizing: border-box;
transition: 0.8s;
margin-bottom: 16px;
overflow: hidden; }
.image-swiper .z-sof-g2:hover {
background: #d51920;
border: 1px solid #d51920;
transition: 0.8s; }
.image-swiper .z-sof-g2:nth-child(odd) {
float: left; }
.image-swiper .z-sof-g2:nth-child(even) {
float: right; }
.image-swiper .z-sof-g2:nth-child(1) {
padding-bottom: 29.1667%; }
.image-swiper .z-sof-g2:nth-child(2) {
padding-bottom: 29.1667%; }
.image-swiper .z-sof-g2:nth-child(3) {
padding-bottom: 22.3611%; }
.image-swiper .z-sof-g2:nth-child(4) {
padding-bottom: 22.3611%; }
.image-swiper .z-sof-g3 {
height: 0;
position: absolute;
top: 0;
right: 0;
opacity: 0;
transition: 0.8s; }
.image-swiper .z-sof-g2:hover .z-sof-g3 {
opacity: 0.3;
transition: 0.8s; }
.image-swiper .z-sof-g4 {
position: absolute;
bottom: 0;
right: 14px;
opacity: 0.8; }
.image-swiper .z-sof-g4:nth-child(1) {
width: 37.7465%; }
.image-swiper .z-sof-g4:nth-child(2) {
width: 50.2817%; }
.image-swiper .z-sof-g4:nth-child(3) {
width: 40.2817%; }
.image-swiper .z-sof-g4:nth-child(4) {
width: 32.8169%; }
.image-swiper .z-sof-g4 img {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
transition: 0.8s; }
.image-swiper .z-sof-g4 img:nth-child(1) {
opacity: 1; }
.image-swiper .z-sof-g4 img:nth-child(2) {
opacity: 0; }
.image-swiper .z-sof-g2:hover .z-sof-g4 img:nth-child(1) {
opacity: 0;
transition: 0.8s; }
.image-swiper .z-sof-g2:hover .z-sof-g4 img:nth-child(2) {
opacity: 1;
transition: 0.8s; }
.image-swiper .z-sof-g5 {
font-size: 30px;
line-height: 30px;
color: #585858;
font-weight: lighter;
text-indent: 15px;
border-left: 4px solid #d51920;
position: absolute;
top: 15.2381%;
left: 5.9%;
transition: 0.8s; }
.image-swiper .z-sof-g2:hover .z-sof-g5 {
color: #fff;
border-left: 4px solid #fff;
transition: 0.8s; }
.image-swiper .z-sof-g6 {
font-size: 16px;
line-height: 36px;
color: #666666;
font-weight: lighter;
width: calc(100% - 11.8%);
position: absolute;
top: 32.381%;
left: 5.9%;
transition: 0.8s; }
.image-swiper .z-sof-g2:hover .z-sof-g6 {
color: #fff;
transition: 0.8s; }
.image-swiper .z-sof-f6 {
width: calc(100% - 60px);
font-size: 20px;
line-height: 34px;
color: #5c5c5c;
font-weight: lighter;
margin: 0 auto; }
.image-swiper .z-sof-f7 {
width: 100%; }
.image-swiper .z-sof-f8 {
width: 23.61%;
margin-right: 1.8533%;
margin-bottom: 1.8533%;
box-shadow: 0 0 26px rgba(164, 164, 164, 0.19);
float: left; }
.image-swiper .z-sof-f8:nth-child(4n) {
margin-right: 0; }
.image-swiper .z-sof-f9 {
width: 100%;
height: 0;
padding-bottom: 47.0588%;
position: relative;
border: 0;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
overflow: hidden; }
.image-swiper .z-sof-f9 img {
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.8s; }
.image-swiper .z-sof-f8:hover .z-sof-f9 img {
transform: scale(1.1);
transition: 0.8s; }
.image-swiper .z-sof-f10 {
width: 100%;
height: 60px;
font-size: 16px;
line-height: 60px;
color: #5c5c5c;
text-align: center;
padding: 0 10px;
box-sizing: border-box; } }
@media only screen and (min-width: 1440px) and (max-width: 1700px) {
.image-swiper .z-sof-g5 {
font-size: 24px;
line-height: 24px;
top: 10%; }
.image-swiper .z-sof-g6 {
font-size: 14px;
line-height: 30px;
top: 22.381%; } }
@media only screen and (max-width: 1439px) and (min-width: 1270px) {
.image-swiper .z-sof-ach1 {
height: 0;
position: relative;
top: -80px; }
.image-swiper .z-sof-ban1 {
width: 100%;
height: 0;
padding-bottom: 43.2291%;
position: relative; }
.image-swiper .z-sof-ban1 > img {
position: absolute;
top: 0;
left: 0;
width: 100%; }
.image-swiper .z-sof-ban2 {
width: 8.0729%;
position: absolute;
top: 12.6506%;
right: 17.96875%; }
.image-swiper .z-sof-ban3 {
width: 9.6875%;
position: absolute;
top: 69.8795%;
left: 25.78125%; }
.image-swiper .z-sof-ban4 {
width: 34.6354%;
position: absolute;
top: 16.2651%;
left: 13.28125%; }
.image-swiper .z-sof-ban5 {
width: 35.2083%;
position: absolute;
top: 29.2771%;
right: 12.9167%; }
.image-swiper .z-sof-ban6 {
width: 8.5417%;
position: absolute;
top: 49.759%;
right: 42.1875%; }
.image-swiper .z-sof-ban7 {
width: 18.6979%;
position: absolute;
top: 56.6265%;
right: 29.1667%; }
.image-swiper .z-sof-ban8 {
width: 35.1042%;
position: absolute;
top: 66.2651%;
right: 13.0208%; }
.image-swiper .z-sof-e1 {
width: 75%;
margin: 0 auto;
height: 0;
padding-bottom: 15.78125%;
position: relative; }
.image-swiper .z-sof-e2 {
font-size: 30px;
line-height: 30px;
color: #333333;
font-family: "pfsc";
position: absolute;
top: 27.7228%;
left: 0; }
.image-swiper .z-sof-e3 {
font-size: 18px;
line-height: 18px;
color: #999999;
font-family: "pfsc";
position: absolute;
top: 44.2244%;
left: 0;
text-transform: uppercase; }
.image-swiper .z-sof-e4 {
font-size: 15px;
line-height: 24px;
color: #333333;
font-weight: lighter;
position: absolute;
top: 62.0462%;
left: 0; }
.image-swiper .z-sof-e5 {
position: absolute;
top: 47.1947%;
right: 0; }
.image-swiper .z-sof-e5 > img {
width: 15px;
float: left;
margin-right: 12px; }
.image-swiper .z-sof-e5 > div {
float: left;
font-size: 14px;
line-height: 21px;
color: #666666;
white-space: nowrap; }
.image-swiper .z-sof-e6 {
width: 100%;
position: absolute;
bottom: 0;
left: 0; }
.image-swiper .z-sof-e7 {
width: 100%;
height: 1px;
background: #e0e0e0;
position: absolute;
bottom: 0;
left: 0; }
.image-swiper .z-sof-e8 {
height: 46px;
position: absolute;
bottom: -1px;
right: 0; }
.image-swiper .z-sof-e8 > div {
float: left;
height: 100%;
margin-right: 24px; }
.image-swiper .z-sof-e8 > div:last-child {
margin-right: 0; }
.image-swiper .z-sof-e8 > div > b {
width: 6px;
height: 6px;
background: #d51920;
display: block;
position: relative;
top: calc(50% - 3px);
margin-right: 12px;
float: left; }
.image-swiper .z-sof-e8 > div > div {
float: left;
position: relative;
height: 100%;
font-size: 16px;
line-height: 46px;
color: #666666;
font-weight: lighter;
position: relative; }
.image-swiper .z-sof-e8 > div > div b {
display: block;
height: 3px;
background: #d51920;
position: absolute;
bottom: 0;
left: 50%;
width: 0;
transition: 0.5s; }
.image-swiper .z-sof-e8 > div > div:hover b {
width: 100%;
left: 0;
transition: 0.5s; }
.image-swiper .z-sof-e8 > .z-sof-e8don > div b {
width: 100%;
left: 0;
transition: 0.5s; }
.image-swiper .z-sof-f1 {
width: 75%;
padding-top: 2.0833%;
padding-bottom: 3.6458%;
margin: 0 auto; }
.image-swiper .z-sof-f2 {
font-size: 24px;
line-height: 24px;
color: #000000;
margin-left: 24px;
margin-bottom: 16px; }
.image-swiper .z-sof-f3 {
width: 46px;
height: 3px;
background: #d51920;
margin-bottom: 16px;
margin-left: 24px; }
.image-swiper .z-sof-f4 {
font-size: 16px;
line-height: 16px;
color: #5c5c5c;
margin-left: 24px;
margin-bottom: 36px;
font-weight: lighter; }
.image-swiper .z-sof-f5 {
width: 100%;
font-size: 14px;
line-height: 28px;
color: #666666;
font-weight: lighter; }
.image-swiper .z-sof-g0 {
display: none; }
.image-swiper .z-sof-g1 {
width: 75%;
margin: 0 auto; }
.image-swiper .z-sof-g2 {
width: calc(50% - 6px);
position: relative;
height: 0;
border: 1px solid #e6e6e6;
border-radius: 10px;
box-sizing: border-box;
transition: 0.8s;
margin-bottom: 12px;
overflow: hidden; }
.image-swiper .z-sof-g2:hover {
background: #d51920;
border: 1px solid #d51920;
transition: 0.8s; }
.image-swiper .z-sof-g2:nth-child(odd) {
float: left; }
.image-swiper .z-sof-g2:nth-child(even) {
float: right; }
.image-swiper .z-sof-g2:nth-child(1) {
padding-bottom: 29.1667%; }
.image-swiper .z-sof-g2:nth-child(2) {
padding-bottom: 29.1667%; }
.image-swiper .z-sof-g2:nth-child(3) {
padding-bottom: 22.3611%; }
.image-swiper .z-sof-g2:nth-child(4) {
padding-bottom: 22.3611%; }
.image-swiper .z-sof-g3 {
height: 0;
position: absolute;
top: 0;
right: 0;
opacity: 0;
transition: 0.8s; }
.image-swiper .z-sof-g2:hover .z-sof-g3 {
opacity: 0.3;
transition: 0.8s; }
.image-swiper .z-sof-g4 {
position: absolute;
bottom: 0;
right: 14px;
opacity: 0.8; }
.image-swiper .z-sof-g4:nth-child(1) {
width: 37.7465%; }
.image-swiper .z-sof-g4:nth-child(2) {
width: 50.2817%; }
.image-swiper .z-sof-g4:nth-child(3) {
width: 40.2817%; }
.image-swiper .z-sof-g4:nth-child(4) {
width: 32.8169%; }
.image-swiper .z-sof-g4 img {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
transition: 0.8s; }
.image-swiper .z-sof-g4 img:nth-child(1) {
opacity: 1; }
.image-swiper .z-sof-g4 img:nth-child(2) {
opacity: 0; }
.image-swiper .z-sof-g2:hover .z-sof-g4 img:nth-child(1) {
opacity: 0;
transition: 0.8s; }
.image-swiper .z-sof-g2:hover .z-sof-g4 img:nth-child(2) {
opacity: 1;
transition: 0.8s; }
.image-swiper .z-sof-g5 {
font-size: 20px;
line-height: 20px;
color: #585858;
font-weight: lighter;
text-indent: 12px;
border-left: 4px solid #d51920;
position: absolute;
top: 8%;
left: 5%;
transition: 0.8s; }
.image-swiper .z-sof-g2:hover .z-sof-g5 {
color: #fff;
border-left: 4px solid #fff;
transition: 0.8s; }
.image-swiper .z-sof-g6 {
font-size: 14px;
line-height: 28px;
color: #666666;
font-weight: lighter;
width: calc(100% - 10%);
position: absolute;
top: 18%;
left: 5%;
transition: 0.8s; }
.image-swiper .z-sof-g2:hover .z-sof-g6 {
color: #fff;
transition: 0.8s; }
.image-swiper .z-sof-f6 {
width: calc(100% - 60px);
font-size: 16px;
line-height: 30px;
color: #5c5c5c;
font-weight: lighter;
margin: 0 auto; }
.image-swiper .z-sof-f7 {
width: 100%; }
.image-swiper .z-sof-f8 {
width: 23.61%;
margin-right: 1.8533%;
margin-bottom: 1.8533%;
box-shadow: 0 0 26px rgba(164, 164, 164, 0.19);
float: left; }
.image-swiper .z-sof-f8:nth-child(4n) {
margin-right: 0; }
.image-swiper .z-sof-f9 {
width: 100%;
height: 0;
padding-bottom: 47.0588%;
position: relative;
border: 0;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
overflow: hidden; }
.image-swiper .z-sof-f9 img {
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.8s; }
.image-swiper .z-sof-f8:hover .z-sof-f9 img {
transform: scale(1.1);
transition: 0.8s; }
.image-swiper .z-sof-f10 {
width: 100%;
height: 48px;
font-size: 14px;
line-height: 48px;
color: #5c5c5c;
text-align: center;
padding: 0 8px;
box-sizing: border-box; } }
@media only screen and (max-width: 1269px) and (min-width: 1024px) {
.image-swiper .z-sof-ach1 {
height: 0;
position: relative;
top: -60px; }
.image-swiper .z-sof-ban1 {
width: 100%;
height: 0;
padding-bottom: 43.2291%;
position: relative; }
.image-swiper .z-sof-ban1 > img {
position: absolute;
top: 0;
left: 0;
width: 100%; }
.image-swiper .z-sof-ban2 {
width: 8.0729%;
position: absolute;
top: 12.6506%;
right: 17.96875%; }
.image-swiper .z-sof-ban3 {
width: 9.6875%;
position: absolute;
top: 69.8795%;
left: 25.78125%; }
.image-swiper .z-sof-ban4 {
width: 34.6354%;
position: absolute;
top: 16.2651%;
left: 13.28125%; }
.image-swiper .z-sof-ban5 {
width: 35.2083%;
position: absolute;
top: 29.2771%;
right: 12.9167%; }
.image-swiper .z-sof-ban6 {
width: 8.5417%;
position: absolute;
top: 49.759%;
right: 42.1875%; }
.image-swiper .z-sof-ban7 {
width: 18.6979%;
position: absolute;
top: 56.6265%;
right: 29.1667%; }
.image-swiper .z-sof-ban8 {
width: 35.1042%;
position: absolute;
top: 66.2651%;
right: 13.0208%; }
.image-swiper .z-sof-e1 {
width: 75%;
margin: 0 auto;
height: 0;
padding-bottom: 15.78125%;
position: relative; }
.image-swiper .z-sof-e2 {
font-size: 24px;
line-height: 24px;
color: #333333;
font-family: "pfsc";
position: absolute;
top: 27.7228%;
left: 0; }
.image-swiper .z-sof-e3 {
font-size: 16px;
line-height: 16px;
color: #999999;
font-family: "pfsc";
position: absolute;
top: 44.2244%;
left: 0;
text-transform: uppercase; }
.image-swiper .z-sof-e4 {
font-size: 12px;
line-height: 20px;
color: #333333;
font-weight: lighter;
position: absolute;
top: 62.0462%;
left: 0; }
.image-swiper .z-sof-e5 {
position: absolute;
top: 47.1947%;
right: 0; }
.image-swiper .z-sof-e5 > img {
width: 12px;
float: left;
margin-right: 10px; }
.image-swiper .z-sof-e5 > div {
float: left;
font-size: 14px;
line-height: 21px;
color: #666666;
white-space: nowrap; }
.image-swiper .z-sof-e6 {
width: 100%;
position: absolute;
bottom: 0;
left: 0; }
.image-swiper .z-sof-e7 {
width: 100%;
height: 1px;
background: #e0e0e0;
position: absolute;
bottom: 0;
left: 0; }
.image-swiper .z-sof-e8 {
height: 36px;
position: absolute;
bottom: -1px;
right: 0; }
.image-swiper .z-sof-e8 > div {
float: left;
height: 100%;
margin-right: 24px; }
.image-swiper .z-sof-e8 > div:last-child {
margin-right: 0; }
.image-swiper .z-sof-e8 > div > b {
width: 6px;
height: 6px;
background: #d51920;
display: block;
position: relative;
top: calc(50% - 3px);
margin-right: 10px;
float: left; }
.image-swiper .z-sof-e8 > div > div {
float: left;
position: relative;
height: 100%;
font-size: 14px;
line-height: 36px;
color: #666666;
font-weight: lighter;
position: relative; }
.image-swiper .z-sof-e8 > div > div b {
display: block;
height: 3px;
background: #d51920;
position: absolute;
bottom: 0;
left: 50%;
width: 0;
transition: 0.5s; }
.image-swiper .z-sof-e8 > div > div:active b {
width: 100%;
left: 0;
transition: 0.5s; }
.image-swiper .z-sof-e8 > .z-sof-e8don > div b {
width: 100%;
left: 0;
transition: 0.5s; }
.image-swiper .z-sof-f1 {
width: 75%;
padding-top: 2.0833%;
padding-bottom: 3.6458%;
margin: 0 auto; }
.image-swiper .z-sof-f2 {
font-size: 20px;
line-height: 20px;
color: #000000;
margin-left: 20px;
margin-bottom: 12px; }
.image-swiper .z-sof-f3 {
width: 46px;
height: 3px;
background: #d51920;
margin-bottom: 12px;
margin-left: 20px; }
.image-swiper .z-sof-f4 {
font-size: 14px;
line-height: 14px;
color: #5c5c5c;
margin-left: 20px;
margin-bottom: 30px;
font-weight: lighter; }
.image-swiper .z-sof-f5 {
width: 100%;
font-size: 12px;
line-height: 24px;
color: #666666;
font-weight: lighter; }
.image-swiper .z-sof-g0 {
display: none; }
.image-swiper .z-sof-g1 {
width: 75%;
margin: 0 auto; }
.image-swiper .z-sof-g2 {
width: calc(50% - 4px);
position: relative;
height: 0;
border: 1px solid #e6e6e6;
border-radius: 10px;
box-sizing: border-box;
transition: 0.8s;
margin-bottom: 8px;
overflow: hidden; }
.image-swiper .z-sof-g2:active {
background: #d51920;
border: 1px solid #d51920;
transition: 0.8s; }
.image-swiper .z-sof-g2:nth-child(odd) {
float: left; }
.image-swiper .z-sof-g2:nth-child(even) {
float: right; }
.image-swiper .z-sof-g2:nth-child(1) {
padding-bottom: 29.1667%; }
.image-swiper .z-sof-g2:nth-child(2) {
padding-bottom: 29.1667%; }
.image-swiper .z-sof-g2:nth-child(3) {
padding-bottom: 22.3611%; }
.image-swiper .z-sof-g2:nth-child(4) {
padding-bottom: 22.3611%; }
.image-swiper .z-sof-g3 {
height: 0;
position: absolute;
top: 0;
right: 0;
opacity: 0;
transition: 0.8s; }
.image-swiper .z-sof-g2:active .z-sof-g3 {
opacity: 0.3;
transition: 0.8s; }
.image-swiper .z-sof-g4 {
position: absolute;
bottom: 0;
right: 14px;
opacity: 0.8; }
.image-swiper .z-sof-g4:nth-child(1) {
width: 37.7465%; }
.image-swiper .z-sof-g4:nth-child(2) {
width: 50.2817%; }
.image-swiper .z-sof-g4:nth-child(3) {
width: 40.2817%; }
.image-swiper .z-sof-g4:nth-child(4) {
width: 32.8169%; }
.image-swiper .z-sof-g4 img {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
transition: 0.8s; }
.image-swiper .z-sof-g4 img:nth-child(1) {
opacity: 1; }
.image-swiper .z-sof-g4 img:nth-child(2) {
opacity: 0; }
.image-swiper .z-sof-g2:active .z-sof-g4 img:nth-child(1) {
opacity: 0;
transition: 0.8s; }
.image-swiper .z-sof-g2:active .z-sof-g4 img:nth-child(2) {
opacity: 1;
transition: 0.8s; }
.image-swiper .z-sof-g5 {
font-size: 16px;
line-height: 16px;
color: #585858;
font-weight: lighter;
text-indent: 10px;
border-left: 4px solid #d51920;
position: absolute;
top: 4%;
left: 4%;
transition: 0.8s; }
.image-swiper .z-sof-g2:active .z-sof-g5 {
color: #fff;
border-left: 4px solid #fff;
transition: 0.8s; }
.image-swiper .z-sof-g6 {
font-size: 12px;
line-height: 24px;
color: #666666;
font-weight: lighter;
width: calc(100% - 8%);
position: absolute;
top: 12%;
left: 4%;
transition: 0.8s; }
.image-swiper .z-sof-g2:active .z-sof-g6 {
color: #fff;
transition: 0.8s; }
.image-swiper .z-sof-f6 {
width: calc(100% - 60px);
font-size: 12px;
line-height: 24px;
color: #5c5c5c;
font-weight: lighter;
margin: 0 auto; }
.image-swiper .z-sof-f7 {
width: 100%; }
.image-swiper .z-sof-f8 {
width: 23.61%;
margin-right: 1.8533%;
margin-bottom: 1.8533%;
box-shadow: 0 0 26px rgba(164, 164, 164, 0.19);
float: left; }
.image-swiper .z-sof-f8:nth-child(4n) {
margin-right: 0; }
.image-swiper .z-sof-f9 {
width: 100%;
height: 0;
padding-bottom: 47.0588%;
position: relative;
border: 0;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
overflow: hidden; }
.image-swiper .z-sof-f9 img {
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.8s; }
.image-swiper .z-sof-f8:active .z-sof-f9 img {
transform: scale(1.1);
transition: 0.8s; }
.image-swiper .z-sof-f10 {
width: 100%;
height: 36px;
font-size: 12px;
line-height: 36px;
color: #5c5c5c;
text-align: center;
padding: 0 6px;
box-sizing: border-box; } }
@media only screen and (max-width: 1023px) {
.image-swiper .z-sof-ach1 {
height: 0;
position: relative;
top: -60px; }
.image-swiper .z-sof-ban1 {
width: 100%;
height: 3.98rem;
position: relative; }
.image-swiper .z-sof-ban1 > img {
position: absolute;
top: 0;
left: 0;
width: 122%; }
.image-swiper .z-sof-ban2 {
width: 0.8rem;
position: absolute;
top: 0.52rem;
right: 0.72rem; }
.image-swiper .z-sof-ban3 {
width: 0.94rem;
position: absolute;
top: 2.9rem;
left: 1.38rem; }
.image-swiper .z-sof-ban4 {
width: 3.34rem;
position: absolute;
top: 16.2651%;
left: 0.18rem; }
.image-swiper .z-sof-ban5 {
width: 3.4rem;
position: absolute;
top: 1.22rem;
right: 0.24rem; }
.image-swiper .z-sof-ban6 {
width: 0.84rem;
position: absolute;
top: 2.08rem;
left: calc(50% - 0.12rem); }
.image-swiper .z-sof-ban7 {
width: 1.8rem;
position: absolute;
top: 2.36rem;
right: 1.8rem; }
.image-swiper .z-sof-ban8 {
width: 3.38rem;
position: absolute;
top: 2.76rem;
right: 0.24rem; }
.image-swiper .z-sof-e1 {
width: 100%;
margin: 0 auto;
height: 3.3rem;
position: relative;
padding-top: 0.7rem;
box-sizing: border-box; }
.image-swiper .z-sof-e2 {
font-size: 0.4rem;
line-height: 0.4rem;
color: #333333;
font-family: "pfsc";
position: relative;
margin-bottom: 0.08rem;
margin-left: 0.24rem; }
.image-swiper .z-sof-e3 {
font-size: 0.28rem;
line-height: 0.28rem;
color: #999999;
font-family: "pfsc";
position: relative;
margin-bottom: 0.18rem;
text-transform: uppercase;
margin-left: 0.24rem; }
.image-swiper .z-sof-e4 {
font-size: 0.22rem;
line-height: 0.36rem;
color: #333333;
font-weight: lighter;
position: relative;
margin-left: 0.24rem; }
.image-swiper .z-sof-e5 {
position: absolute;
top: 1.16rem;
right: 0.24rem; }
.image-swiper .z-sof-e5 > img {
width: 0.18rem;
float: left;
margin-right: 0.14rem; }
.image-swiper .z-sof-e5 > div {
float: left;
font-size: 0.22rem;
line-height: 0.25rem;
color: #666666;
white-space: nowrap; }
.image-swiper .z-sof-e6 {
width: 100%;
position: absolute;
bottom: 0;
left: 0; }
.image-swiper .z-sof-e7 {
width: 100%;
height: 1px;
background: #e0e0e0;
position: absolute;
bottom: 0;
left: 0; }
.image-swiper .z-sof-e8 {
height: 0.6rem;
position: relative;
width: 116%;
display: flex;
justify-content: space-around;
margin: 0 auto; }
.image-swiper .z-sof-e8 > div {
height: 100%; }
.image-swiper .z-sof-e8 > div > b {
width: 0.06rem;
height: 0.06rem;
background: #d51920;
display: block;
position: relative;
top: calc(50% - 0.03rem);
margin-right: 0.16rem;
float: left; }
.image-swiper .z-sof-e8 > div > div {
float: left;
position: relative;
height: 100%;
font-size: 0.28rem;
line-height: 0.6rem;
color: #666666;
font-weight: lighter;
position: relative; }
.image-swiper .z-sof-e8 > div > div b {
display: block;
height: 3px;
background: #d51920;
position: absolute;
bottom: 0;
left: 50%;
width: 0; }
.image-swiper .z-sof-e8 > .z-sof-e8don > div {
color: #000; }
.image-swiper .z-sof-e8 > .z-sof-e8don > div b {
width: 100%;
left: 0; }
.image-swiper .z-sof-f1 {
width: calc(100% - 0.48rem);
padding-top: 0.6rem;
padding-bottom: 3.6458%;
margin: 0 auto; }
.image-swiper .z-sof-f2 {
font-size: 0.3rem;
line-height: 0.3rem;
color: #000000;
margin-bottom: 0.2rem; }
.image-swiper .z-sof-f3 {
width: 0.46rem;
height: 3px;
background: #d51920;
margin-bottom: 0.2rem; }
.image-swiper .z-sof-f4 {
font-size: 0.24rem;
line-height: 0.24rem;
color: #5c5c5c;
margin-bottom: 0.38rem;
font-weight: lighter; }
.image-swiper .z-sof-f5 {
width: 100%;
font-size: 0.24rem;
line-height: 0.4rem;
color: #666666;
font-weight: lighter; }
.image-swiper .z-sof-g0 {
width: 100%;
height: 0.98rem;
background: #f4f4f4;
display: flex;
justify-content: space-between;
margin-bottom: 0.26rem; }
.image-swiper .z-sof-g0 > div {
font-size: 0.28rem;
line-height: 0.98rem;
color: #000000;
padding: 0 0.24rem; }
.image-swiper .z-sof-g0 > .z-sof-g0on {
color: #fff;
background: #d51920; }
.image-swiper .z-sof-g1 {
width: calc(100% - 0.48rem);
margin: 0 auto; }
.image-swiper .z-sof-g2 {
width: 100%;
position: relative;
border: 1px solid #e6e6e6;
border-radius: 0.1rem;
box-sizing: border-box;
overflow: hidden;
padding: 0.55rem 0.26rem 0.6rem 0.26rem;
display: none; }
.image-swiper .z-sof-g3 {
display: none; }
.image-swiper .z-sof-g4 {
position: absolute;
bottom: 0;
right: 0;
opacity: 0.8;
width: 2.2rem; }
.image-swiper .z-sof-g4 img {
position: absolute;
bottom: 0;
right: 0;
width: 100%; }
.image-swiper .z-sof-g4 img:nth-child(2) {
display: none; }
.image-swiper .z-sof-g5 {
font-size: 0.3rem;
line-height: 0.3rem;
color: #585858;
font-weight: lighter;
text-indent: 0.18rem;
border-left: 4px solid #d51920;
position: relative;
margin-left: -0.04rem;
margin-bottom: 0.44rem; }
.image-swiper .z-sof-g6 {
font-size: 0.24rem;
line-height: 0.4rem;
color: #666666;
font-weight: lighter;
position: relative; }
.image-swiper .z-sof-f6 {
width: 100%;
font-size: 0.24rem;
line-height: 0.4rem;
color: #5c5c5c;
font-weight: lighter;
margin: 0 auto; }
.image-swiper .z-sof-f7 {
width: 100%; }
.image-swiper .z-sof-f8 {
width: calc(50% - 0.12rem);
margin-bottom: 0.24rem;
box-shadow: 0 0 0.26rem rgba(164, 164, 164, 0.19); }
.image-swiper .z-sof-f8:nth-child(odd) {
float: left; }
.image-swiper .z-sof-f8:nth-child(even) {
float: right; }
.image-swiper .z-sof-f9 {
width: 100%;
position: relative;
border: 0;
border-top-left-radius: 8px;
border-top-right-radius: 0.1rem;
overflow: hidden; }
.image-swiper .z-sof-f9 img {
width: 100%;
position: relative; }
.image-swiper .z-sof-f10 {
width: 100%;
height: 0.8rem;
font-size: 0.22rem;
line-height: 0.8rem;
color: #5c5c5c;
text-align: center;
padding: 0 0.05rem;
box-sizing: border-box; } }
@media only screen and (min-width: 1440px) {
.image-swiper .z-h5-t1 {
width: 68px;
height: 2px;
background: #d51920;
position: absolute; }
.image-swiper .z-h5-t2 {
font-size: 43px;
line-height: 43px;
color: #000;
position: absolute;
font-weight: bold; }
.image-swiper .z-h5-t2 span {
color: #d51920; }
.image-swiper .z-h5-t3 {
font-size: 26px;
line-height: 44px;
color: #333333;
font-family: "yuanjian";
position: absolute; }
.image-swiper .z-h5-t4 {
font-size: 36px;
line-height: 36px;
color: #333333;
position: absolute; }
.image-swiper .z-h5-t5 {
font-size: 13px;
line-height: 24px;
color: #fff;
position: absolute;
font-family: "yuanjian"; }
.image-swiper .z-h5-a1 {
width: 100%;
height: 0;
padding-bottom: 48.4375%;
position: relative;
overflow: hidden; }
.image-swiper .z-h5-a1 > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.image-swiper .z-h5-a1 > img:nth-child(1) {
display: block; }
.image-swiper .z-h5-a1 > img:nth-child(2) {
display: none; }
.image-swiper .z-h5-a1 .z-h5-t1 {
top: 38.49%;
right: 12.5%; }
.image-swiper .z-h5-a1 .z-h5-t2 {
top: 41.94%;
right: 12.5%;
color: #fff; }
.image-swiper .z-h5-a1 .z-h5-t3 {
top: 48.17%;
right: 12.5%;
color: #fff; }
.image-swiper .z-h5-a1 .z-h5-t5 {
top: 53.98%;
right: 12.5%;
text-align: right; }
.image-swiper .z-h5-a2 {
width: 45.1%;
position: absolute;
top: 28.28%;
left: 8.33%; }
.image-swiper .z-h5-a3 {
width: 12.6%;
position: absolute;
top: 45.37%;
left: 42.7%; }
.image-swiper .z-h5-a4 {
width: 5.42%;
position: absolute;
top: 62.58%;
left: 38.8%; }
.image-swiper .z-h5-b1 {
width: 100%;
height: 0;
padding-bottom: 42.92%;
position: relative;
overflow: hidden; }
.image-swiper .z-h5-b1 .z-h5-t1 {
position: absolute;
left: 12.5%;
top: 19.41%; }
.image-swiper .z-h5-b1 .z-h5-t2 {
position: absolute;
left: 12.5%;
top: 23.78%; }
.image-swiper .z-h5-b1 .z-h5-t3 {
position: absolute;
left: 12.5%;
top: 31.55%; }
.image-swiper .z-h5-b2 {
width: 27.03%;
position: absolute;
top: 44.66%;
left: 12.5%; }
.image-swiper .z-h5-b3 {
width: 44.48%;
position: absolute;
top: 16.95%;
right: 11.66%; }
.image-swiper .z-h5-c1 {
width: 100%;
height: 0;
padding-bottom: 45.15%;
position: relative;
overflow: hidden; }
.image-swiper .z-h5-c1 > img {
position: absolute;
top: 0;
left: 0;
width: 100%; }
.image-swiper .z-h5-c1 > img:nth-child(1) {
display: block; }
.image-swiper .z-h5-c1 > img:nth-child(2) {
display: none; }
.image-swiper .z-h5-c1 .z-h5-t1 {
position: absolute;
left: 57.55%;
top: 13.72%; }
.image-swiper .z-h5-c1 .z-h5-t2 {
position: absolute;
left: 57.55%;
top: 17.53%; }
.image-swiper .z-h5-c1 .z-h5-t3 {
position: absolute;
left: 57.55%;
top: 23.99%;
color: #000; }
.image-swiper .z-h5-c2 {
width: 31.875%;
position: absolute;
top: 17.99%;
left: 11.92%; }
.image-swiper .z-h5-c3 {
width: 22.4%;
position: absolute;
top: 51.9%;
left: 36.15%; }
.image-swiper .z-h5-c4 {
position: absolute;
left: 61.04%;
top: 32.26%;
width: 495px; }
.image-swiper .z-h5-c4 > div:first-child {
width: 1px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #977cf0; }
.image-swiper .z-h5-c4 > div:last-child {
position: relative;
width: 100%; }
.image-swiper .z-h5-c5 {
width: 100%;
margin-bottom: 20px;
width: 100%;
height: 86px;
position: relative; }
.image-swiper .z-h5-c6 {
width: 5px;
height: 10px;
background: #977cf0;
transition: 0.5s;
position: absolute;
top: calc(50% - 5px);
left: -2px; }
.image-swiper .z-h5-c5:hover .z-h5-c6 {
background: #e50127;
top: calc(50% - 40px);
height: 80px; }
.image-swiper .z-h5-c7 {
width: calc(100% - 6px);
height: 100%;
border: 1px solid rgba(248, 44, 78, 0);
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
box-sizing: border-box;
background: rgba(172, 15, 119, 0);
transition: 0.5s;
margin-left: 6px; }
.image-swiper .z-h5-c5:hover .z-h5-c7 {
border: 1px solid rgba(248, 44, 78, 0.82);
background: #ac0f77;
transition: 0.5s; }
.image-swiper .z-h5-c7 > div:first-child {
font-size: 28px;
line-height: 28px;
color: #fff;
position: absolute;
top: 18px;
left: 66px;
transition: 0.5s; }
.image-swiper .z-h5-c7 > div:last-child {
font-size: 20px;
line-height: 20px;
color: #fff;
position: absolute;
top: 50px;
left: 66px;
font-weight: lighter;
transition: 0.5s; }
.image-swiper .z-h5-c5:hover .z-h5-c7 > div:first-child {
left: 40px;
transition: 0.5s; }
.image-swiper .z-h5-c5:hover .z-h5-c7 > div:last-child {
left: 40px;
transition: 0.5s; }
.image-swiper .z-h5-d1 {
width: 100%;
height: 0;
padding-bottom: 48.22%;
position: relative;
overflow: hidden; }
.image-swiper .z-h5-d1 > img {
width: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-h5-d1 > img:nth-child(1) {
display: block; }
.image-swiper .z-h5-d1 > img:nth-child(2) {
display: none; }
.image-swiper .z-h5-d2 {
width: 12.6%;
position: absolute;
left: -6.3%;
animation: h501 4s linear infinite; }
.image-swiper .z-h5-d3 {
width: 15.83%;
position: absolute;
right: -6.56%;
animation: h502 4s linear infinite; }
@keyframes h501 {
0% {
top: 35.63%; }
50% {
top: 25.63%; }
100% {
top: 35.63%; } }
@keyframes h502 {
0% {
top: 6.47%; }
50% {
top: 20.47%; }
100% {
top: 6.47%; } }
.image-swiper .z-h5-d1 .z-h5-t1 {
position: absolute;
left: 12.5%;
top: 23.75%; }
.image-swiper .z-h5-d1 .z-h5-t2 {
position: absolute;
left: 12.5%;
top: 27.64%; }
.image-swiper .z-h5-d1 .z-h5-t3 {
position: absolute;
left: 12.5%;
top: 34.55%; }
.image-swiper .z-h5-d4 {
width: 33.8%;
position: absolute;
top: 6.26%;
left: 44.75%; }
.image-swiper .z-h5-d5 {
width: 32.18%;
position: absolute;
top: 38.66%;
left: 53.6%; }
.image-swiper .z-h5-d6 {
width: 11.66%;
position: absolute;
top: 39.31%;
left: 38.81%; }
.image-swiper .z-h5-d7 > div {
width: 200%; }
.image-swiper .z-h5-d7 > div:first-child {
position: absolute;
top: 70.19%;
opacity: 0.5;
animation: h503 10s -5s linear infinite; }
.image-swiper .z-h5-d7 > div:last-child {
position: absolute;
top: 67.38%;
opacity: 1;
animation: h504 10s linear infinite; }
@keyframes h503 {
0% {
left: 0; }
100% {
left: -100%; } }
@keyframes h504 {
0% {
right: 0; }
100% {
right: -100%; } }
.image-swiper .z-h5-d8 {
width: 100px;
height: 100px;
border: 0;
border-radius: 50%;
position: absolute; }
.image-swiper .z-h5-d8:nth-child(1) {
top: 62.27%;
left: 14.68%; }
.image-swiper .z-h5-d8:nth-child(2) {
top: 76.67%;
left: 26.77%; }
.image-swiper .z-h5-d8:nth-child(3) {
top: 62.85%;
left: 40.41%; }
.image-swiper .z-h5-d8:nth-child(4) {
top: 75.59%;
left: 54.79%; }
.image-swiper .z-h5-d8:nth-child(5) {
top: 69.11%;
left: 67.29%; }
.image-swiper .z-h5-d8:nth-child(6) {
top: 62.63%;
left: 80.62%; }
.image-swiper .z-h5-d8 > div:nth-child(1) {
width: 100%;
height: 100%;
background: rgba(37, 143, 252, 0.3);
border: 0;
border-radius: 50%;
transition: 0.5s; }
.image-swiper .z-h5-d8:hover > div:nth-child(1) {
background: rgba(251, 167, 8, 0.3);
transition: 0.5s;
animation: h505 2s linear infinite; }
@keyframes h505 {
0% {
transform: scale(1);
opacity: 1; }
100% {
transform: scale(1.5);
opacity: 0; } }
.image-swiper .z-h5-d8 > div:nth-child(2) {
width: 84%;
height: 84%;
position: absolute;
top: 8%;
left: 8%; }
.image-swiper .z-h5-d8 > div:nth-child(2) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: 0.5s; }
.image-swiper .z-h5-d8 > div:nth-child(2) img:first-child {
opacity: 1; }
.image-swiper .z-h5-d8 > div:nth-child(2) img:last-child {
opacity: 0; }
.image-swiper .z-h5-d8:hover > div:nth-child(2) img:first-child {
opacity: 0;
transition: 0.5s; }
.image-swiper .z-h5-d8:hover > div:nth-child(2) img:last-child {
opacity: 1;
transition: 0.5s; }
.image-swiper .z-h5-d8 > div:nth-child(3) {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-h5-d8:nth-child(1) > div:nth-child(3) img {
width: 50%;
position: absolute;
top: 30%;
left: 25%; }
.image-swiper .z-h5-d8:nth-child(2) > div:nth-child(3) img {
width: 44%;
position: absolute;
top: 30%;
left: 28%; }
.image-swiper .z-h5-d8:nth-child(3) > div:nth-child(3) img {
width: 49%;
position: absolute;
top: 25%;
left: 26%; }
.image-swiper .z-h5-d8:nth-child(4) > div:nth-child(3) img {
width: 56%;
position: absolute;
top: 30%;
left: 24%; }
.image-swiper .z-h5-d8:nth-child(5) > div:nth-child(3) img {
width: 50%;
position: absolute;
top: 25%;
left: 25%; }
.image-swiper .z-h5-d8:nth-child(6) > div:nth-child(3) img {
width: 50%;
position: absolute;
top: 32%;
left: 29%; }
.image-swiper .z-h5-d8 > div:nth-child(4) {
font-size: 16px;
line-height: 16px;
color: #258ffc;
text-align: center;
position: absolute;
top: 120%;
left: -50%;
width: 200%; }
.image-swiper .z-h5-e1 {
width: 100%;
position: relative;
overflow: hidden; }
.image-swiper .z-h5-e1 > img {
width: 100%;
position: relative; }
.image-swiper .z-h5-e1 > img:nth-child(1) {
display: block; }
.image-swiper .z-h5-e1 > img:nth-child(2) {
display: none; }
.image-swiper .z-h5-e1 .z-h5-t2 {
top: 11.435%;
left: 0;
width: 100%;
text-align: center; }
.image-swiper .z-h5-e1 .z-h5-t4 {
top: 18.722%;
left: 0;
letter-spacing: 20px;
text-indent: 20px;
width: 100%;
text-align: center; }
.image-swiper .z-h5-e2 {
width: 89.84%;
height: 54.26%;
position: absolute;
top: 31.68%;
left: calc((100% - 89.84%) / 2); }
.image-swiper .swh51 {
width: 100%;
height: 100%; }
.image-swiper .swh51 .swiper-slide {
width: 20% !important;
height: 100%;
position: relative; }
.image-swiper .swh51 .swiper-slide img {
width: 100%;
height: 100%;
transform: rotateY(0deg) scale(0.8);
transform-origin: 50% 50% 0;
transition: 0.5s; }
.image-swiper .swh51 .swiper-slide-next img {
transform: rotateY(60deg) scale(1);
transition: 0.5s;
transform-origin: 0 100% 0;
-webkit-perspective: 400px;
perspective: 400px; }
.image-swiper .swh51 .swiper-slide-prev img {
transform: rotateY(-60deg) scale(1);
transition: 0.5s;
transform-origin: 100% 0 0;
-webkit-perspective: 400px;
perspective: 400px; }
.image-swiper .swh51 .swiper-slide-active img {
transform: rotateY(0deg) scale(1) scaleZ(1);
transform-origin: 50% 50% 0;
transition: 0.5s; }
.image-swiper .next51 {
background: none;
position: absolute;
top: calc(62% - 40px);
width: 47px;
height: 80px; }
.image-swiper .prev51 {
background: none;
position: absolute;
top: calc(62% - 40px);
width: 47px;
height: 80px; }
.image-swiper .next51 > img, .image-swiper .prev51 > img {
position: absolute;
width: 100%;
height: 100%; }
.image-swiper .z-h5-f1 {
width: 100%;
height: 0;
padding-bottom: 33.6979%;
position: relative;
background: #fff;
overflow: hidden; }
.image-swiper .z-h5-f1 .z-h5-t1 {
top: 32.1484%;
left: 12.1875%; }
.image-swiper .z-h5-f1 .z-h5-t2 {
top: 37.0943%;
left: 12.1875%; }
.image-swiper .z-h5-f1 .z-h5-t3 {
top: 47.9042%;
left: 12.1875%; }
.image-swiper .z-h5-f2 {
width: 5.2083%;
position: absolute;
top: 24.4204%;
left: 60.8854%; }
.image-swiper .z-h5-f3 {
width: 26.5625%;
position: absolute;
top: 12.983%;
right: 12.7083%; }
.image-swiper .sw52 {
display: none; } }
@media only screen and (max-width: 1439px) and (min-width: 1270px) {
.image-swiper .z-h5-t1 {
width: 60px;
height: 2px;
background: #d51920;
position: absolute; }
.image-swiper .z-h5-t2 {
font-size: 36px;
line-height: 36px;
color: #000;
position: absolute;
font-weight: bold; }
.image-swiper .z-h5-t2 span {
color: #d51920; }
.image-swiper .z-h5-t3 {
font-size: 20px;
line-height: 36px;
color: #333333;
font-family: "yuanjian";
position: absolute; }
.image-swiper .z-h5-t4 {
font-size: 30px;
line-height: 30px;
color: #333333;
position: absolute; }
.image-swiper .z-h5-t5 {
font-size: 12px;
line-height: 22px;
color: #fff;
position: absolute;
font-family: "yuanjian"; }
.image-swiper .z-h5-a1 {
width: 100%;
height: 0;
padding-bottom: 48.4375%;
position: relative;
overflow: hidden; }
.image-swiper .z-h5-a1 > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.image-swiper .z-h5-a1 > img:nth-child(1) {
display: block; }
.image-swiper .z-h5-a1 > img:nth-child(2) {
display: none; }
.image-swiper .z-h5-a1 .z-h5-t1 {
top: 34.49%;
right: 12.5%; }
.image-swiper .z-h5-a1 .z-h5-t2 {
top: 37.94%;
right: 12.5%;
color: #fff; }
.image-swiper .z-h5-a1 .z-h5-t3 {
top: 44.17%;
right: 12.5%;
color: #fff; }
.image-swiper .z-h5-a1 .z-h5-t5 {
top: 49.98%;
right: 12.5%;
text-align: right; }
.image-swiper .z-h5-a2 {
width: 44%;
position: absolute;
top: 28.28%;
left: 8.33%; }
.image-swiper .z-h5-a3 {
width: 12%;
position: absolute;
top: 45.37%;
left: 42.7%; }
.image-swiper .z-h5-a4 {
width: 5%;
position: absolute;
top: 62.58%;
left: 38.8%; }
.image-swiper .z-h5-b1 {
width: 100%;
height: 0;
padding-bottom: 42.92%;
position: relative;
overflow: hidden; }
.image-swiper .z-h5-b1 .z-h5-t1 {
position: absolute;
left: 12.5%;
top: 19.41%; }
.image-swiper .z-h5-b1 .z-h5-t2 {
position: absolute;
left: 12.5%;
top: 23.78%; }
.image-swiper .z-h5-b1 .z-h5-t3 {
position: absolute;
left: 12.5%;
top: 31.55%; }
.image-swiper .z-h5-b2 {
width: 27.03%;
position: absolute;
top: 44.66%;
left: 12.5%; }
.image-swiper .z-h5-b3 {
width: 44.48%;
position: absolute;
top: 16.95%;
right: 11.66%; }
.image-swiper .z-h5-c1 {
width: 100%;
height: 0;
padding-bottom: 45.15%;
position: relative;
overflow: hidden; }
.image-swiper .z-h5-c1 > img {
position: absolute;
top: 0;
left: 0;
width: 100%; }
.image-swiper .z-h5-c1 > img:nth-child(1) {
display: block; }
.image-swiper .z-h5-c1 > img:nth-child(2) {
display: none; }
.image-swiper .z-h5-c1 .z-h5-t1 {
position: absolute;
left: 57.55%;
top: 13.72%; }
.image-swiper .z-h5-c1 .z-h5-t2 {
position: absolute;
left: 57.55%;
top: 17.53%; }
.image-swiper .z-h5-c1 .z-h5-t3 {
position: absolute;
left: 57.55%;
top: 23.99%;
color: #000; }
.image-swiper .z-h5-c2 {
width: 31.875%;
position: absolute;
top: 17.99%;
left: 11.92%; }
.image-swiper .z-h5-c3 {
width: 22.4%;
position: absolute;
top: 51.9%;
left: 36.15%; }
.image-swiper .z-h5-c4 {
position: absolute;
left: 61.04%;
top: 32.26%;
width: 450px; }
.image-swiper .z-h5-c4 > div:first-child {
width: 1px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #977cf0; }
.image-swiper .z-h5-c4 > div:last-child {
position: relative;
width: 100%; }
.image-swiper .z-h5-c5 {
width: 100%;
margin-bottom: 16px;
width: 100%;
height: 76px;
position: relative; }
.image-swiper .z-h5-c6 {
width: 5px;
height: 10px;
background: #977cf0;
transition: 0.5s;
position: absolute;
top: calc(50% - 5px);
left: -2px; }
.image-swiper .z-h5-c5:hover .z-h5-c6 {
background: #e50127;
top: calc(50% - 40px);
height: 80px; }
.image-swiper .z-h5-c7 {
width: calc(100% - 6px);
height: 100%;
border: 1px solid rgba(248, 44, 78, 0);
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
box-sizing: border-box;
background: rgba(172, 15, 119, 0);
transition: 0.5s;
margin-left: 6px; }
.image-swiper .z-h5-c5:hover .z-h5-c7 {
border: 1px solid rgba(248, 44, 78, 0.82);
background: #ac0f77;
transition: 0.5s; }
.image-swiper .z-h5-c7 > div:first-child {
font-size: 24px;
line-height: 24px;
color: #fff;
position: absolute;
top: 10px;
left: 66px;
transition: 0.5s; }
.image-swiper .z-h5-c7 > div:last-child {
font-size: 18px;
line-height: 18px;
color: #fff;
position: absolute;
top: 48px;
left: 66px;
font-weight: lighter;
transition: 0.5s; }
.image-swiper .z-h5-c5:hover .z-h5-c7 > div:first-child {
left: 40px;
transition: 0.5s; }
.image-swiper .z-h5-c5:hover .z-h5-c7 > div:last-child {
left: 40px;
transition: 0.5s; }
.image-swiper .z-h5-d1 {
width: 100%;
height: 0;
padding-bottom: 48.22%;
position: relative;
overflow: hidden; }
.image-swiper .z-h5-d1 > img {
width: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-h5-d1 > img:nth-child(1) {
display: block; }
.image-swiper .z-h5-d1 > img:nth-child(2) {
display: none; }
.image-swiper .z-h5-d2 {
width: 12.6%;
position: absolute;
left: -6.3%;
animation: h501 4s linear infinite; }
.image-swiper .z-h5-d3 {
width: 15.83%;
position: absolute;
right: -6.56%;
animation: h502 4s linear infinite; }
@keyframes h501 {
0% {
top: 35.63%; }
50% {
top: 25.63%; }
100% {
top: 35.63%; } }
@keyframes h502 {
0% {
top: 6.47%; }
50% {
top: 20.47%; }
100% {
top: 6.47%; } }
.image-swiper .z-h5-d1 .z-h5-t1 {
position: absolute;
left: 12.5%;
top: 23.75%; }
.image-swiper .z-h5-d1 .z-h5-t2 {
position: absolute;
left: 12.5%;
top: 27.64%; }
.image-swiper .z-h5-d1 .z-h5-t3 {
position: absolute;
left: 12.5%;
top: 34.55%; }
.image-swiper .z-h5-d4 {
width: 33.8%;
position: absolute;
top: 6.26%;
left: 44.75%; }
.image-swiper .z-h5-d5 {
width: 32.18%;
position: absolute;
top: 38.66%;
left: 53.6%; }
.image-swiper .z-h5-d6 {
width: 11.66%;
position: absolute;
top: 39.31%;
left: 38.81%; }
.image-swiper .z-h5-d7 > div {
width: 200%; }
.image-swiper .z-h5-d7 > div:first-child {
position: absolute;
top: 70.19%;
opacity: 0.5;
animation: h503 10s -5s linear infinite; }
.image-swiper .z-h5-d7 > div:last-child {
position: absolute;
top: 67.38%;
opacity: 1;
animation: h504 10s linear infinite; }
@keyframes h503 {
0% {
left: 0; }
100% {
left: -100%; } }
@keyframes h504 {
0% {
right: 0; }
100% {
right: -100%; } }
.image-swiper .z-h5-d8 {
width: 86px;
height: 86px;
border: 0;
border-radius: 50%;
position: absolute; }
.image-swiper .z-h5-d8:nth-child(1) {
top: 62.27%;
left: 14.68%; }
.image-swiper .z-h5-d8:nth-child(2) {
top: 76.67%;
left: 26.77%; }
.image-swiper .z-h5-d8:nth-child(3) {
top: 62.85%;
left: 40.41%; }
.image-swiper .z-h5-d8:nth-child(4) {
top: 75.59%;
left: 54.79%; }
.image-swiper .z-h5-d8:nth-child(5) {
top: 69.11%;
left: 67.29%; }
.image-swiper .z-h5-d8:nth-child(6) {
top: 62.63%;
left: 80.62%; }
.image-swiper .z-h5-d8 > div:nth-child(1) {
width: 100%;
height: 100%;
background: rgba(37, 143, 252, 0.3);
border: 0;
border-radius: 50%;
transition: 0.5s; }
.image-swiper .z-h5-d8:hover > div:nth-child(1) {
background: rgba(251, 167, 8, 0.3);
transition: 0.5s;
animation: h505 2s linear infinite; }
@keyframes h505 {
0% {
transform: scale(1);
opacity: 1; }
100% {
transform: scale(1.5);
opacity: 0; } }
.image-swiper .z-h5-d8 > div:nth-child(2) {
width: 84%;
height: 84%;
position: absolute;
top: 8%;
left: 8%; }
.image-swiper .z-h5-d8 > div:nth-child(2) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: 0.5s; }
.image-swiper .z-h5-d8 > div:nth-child(2) img:first-child {
opacity: 1; }
.image-swiper .z-h5-d8 > div:nth-child(2) img:last-child {
opacity: 0; }
.image-swiper .z-h5-d8:hover > div:nth-child(2) img:first-child {
opacity: 0;
transition: 0.5s; }
.image-swiper .z-h5-d8:hover > div:nth-child(2) img:last-child {
opacity: 1;
transition: 0.5s; }
.image-swiper .z-h5-d8 > div:nth-child(3) {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-h5-d8:nth-child(1) > div:nth-child(3) img {
width: 50%;
position: absolute;
top: 30%;
left: 25%; }
.image-swiper .z-h5-d8:nth-child(2) > div:nth-child(3) img {
width: 44%;
position: absolute;
top: 30%;
left: 28%; }
.image-swiper .z-h5-d8:nth-child(3) > div:nth-child(3) img {
width: 49%;
position: absolute;
top: 25%;
left: 26%; }
.image-swiper .z-h5-d8:nth-child(4) > div:nth-child(3) img {
width: 56%;
position: absolute;
top: 30%;
left: 24%; }
.image-swiper .z-h5-d8:nth-child(5) > div:nth-child(3) img {
width: 50%;
position: absolute;
top: 25%;
left: 25%; }
.image-swiper .z-h5-d8:nth-child(6) > div:nth-child(3) img {
width: 50%;
position: absolute;
top: 32%;
left: 29%; }
.image-swiper .z-h5-d8 > div:nth-child(4) {
font-size: 15px;
line-height: 16px;
color: #258ffc;
text-align: center;
position: absolute;
top: 116%;
left: -50%;
width: 200%; }
.image-swiper .z-h5-e1 {
width: 100%;
position: relative;
overflow: hidden; }
.image-swiper .z-h5-e1 > img {
width: 100%;
position: relative; }
.image-swiper .z-h5-e1 > img:nth-child(1) {
display: block; }
.image-swiper .z-h5-e1 > img:nth-child(2) {
display: none; }
.image-swiper .z-h5-e1 .z-h5-t2 {
top: 11.435%;
left: 0;
width: 100%;
text-align: center; }
.image-swiper .z-h5-e1 .z-h5-t4 {
top: 18.722%;
left: 0;
letter-spacing: 20px;
text-indent: 20px;
width: 100%;
text-align: center; }
.image-swiper .z-h5-e2 {
width: 89.84%;
height: 54.26%;
position: absolute;
top: 31.68%;
left: calc((100% - 89.84%) / 2); }
.image-swiper .swh51 {
width: 100%;
height: 100%; }
.image-swiper .swh51 .swiper-slide {
width: 20% !important;
height: 100%;
position: relative; }
.image-swiper .swh51 .swiper-slide img {
width: 100%;
height: 100%;
transform: rotateY(0deg) scale(0.8);
transform-origin: 50% 50% 0;
transition: 0.5s; }
.image-swiper .swh51 .swiper-slide-next img {
transform: rotateY(60deg) scale(1);
transition: 0.5s;
transform-origin: 0 100% 0;
-webkit-perspective: 400px;
perspective: 400px; }
.image-swiper .swh51 .swiper-slide-prev img {
transform: rotateY(-60deg) scale(1);
transition: 0.5s;
transform-origin: 100% 0 0;
-webkit-perspective: 400px;
perspective: 400px; }
.image-swiper .swh51 .swiper-slide-active img {
transform: rotateY(0deg) scale(1) scaleZ(1);
transform-origin: 50% 50% 0;
transition: 0.5s; }
.image-swiper .next51 {
background: none;
position: absolute;
top: calc(62% - 40px);
width: 47px;
height: 80px; }
.image-swiper .prev51 {
background: none;
position: absolute;
top: calc(62% - 40px);
width: 47px;
height: 80px; }
.image-swiper .next51 > img, .image-swiper .prev51 > img {
position: absolute;
width: 100%;
height: 100%; }
.image-swiper .z-h5-f1 {
width: 100%;
height: 0;
padding-bottom: 33.6979%;
position: relative;
background: #fff;
overflow: hidden; }
.image-swiper .z-h5-f1 .z-h5-t1 {
top: 32.1484%;
left: 12.1875%; }
.image-swiper .z-h5-f1 .z-h5-t2 {
top: 37.0943%;
left: 12.1875%; }
.image-swiper .z-h5-f1 .z-h5-t3 {
top: 47.9042%;
left: 12.1875%; }
.image-swiper .z-h5-f2 {
width: 5.2083%;
position: absolute;
top: 24.4204%;
left: 60.8854%; }
.image-swiper .z-h5-f3 {
width: 26.5625%;
position: absolute;
top: 12.983%;
right: 12.7083%; }
.image-swiper .sw52 {
display: none; } }
@media only screen and (max-width: 1269px) and (min-width: 1024px) {
.image-swiper .z-h5-t1 {
width: 50px;
height: 2px;
background: #d51920;
position: absolute; }
.image-swiper .z-h5-t2 {
font-size: 30px;
line-height: 30px;
color: #000;
position: absolute;
font-weight: bold; }
.image-swiper .z-h5-t2 span {
color: #d51920; }
.image-swiper .z-h5-t3 {
font-size: 16px;
line-height: 24px;
color: #333333;
font-family: "yuanjian";
position: absolute; }
.image-swiper .z-h5-t4 {
font-size: 24px;
line-height: 24px;
color: #333333;
position: absolute; }
.image-swiper .z-h5-t5 {
font-size: 12px;
line-height: 22px;
color: #fff;
position: absolute;
font-family: "yuanjian"; }
.image-swiper .z-h5-a1 {
width: 100%;
height: 0;
padding-bottom: 48.4375%;
position: relative;
overflow: hidden; }
.image-swiper .z-h5-a1 > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.image-swiper .z-h5-a1 > img:nth-child(1) {
display: block; }
.image-swiper .z-h5-a1 > img:nth-child(2) {
display: none; }
.image-swiper .z-h5-a1 .z-h5-t1 {
top: 32.49%;
right: 12.5%; }
.image-swiper .z-h5-a1 .z-h5-t2 {
top: 35.94%;
right: 12.5%;
color: #fff; }
.image-swiper .z-h5-a1 .z-h5-t3 {
top: 45.17%;
right: 12.5%;
color: #fff; }
.image-swiper .z-h5-a1 .z-h5-t5 {
top: 50.48%;
right: 12.5%;
text-align: right; }
.image-swiper .z-h5-a2 {
width: 44%;
position: absolute;
top: 28.28%;
left: 8.33%; }
.image-swiper .z-h5-a3 {
width: 12%;
position: absolute;
top: 45.37%;
left: 42.7%; }
.image-swiper .z-h5-a4 {
width: 5%;
position: absolute;
top: 62.58%;
left: 38.8%; }
.image-swiper .z-h5-b1 {
width: 100%;
height: 0;
padding-bottom: 42.92%;
position: relative;
overflow: hidden; }
.image-swiper .z-h5-b1 .z-h5-t1 {
position: absolute;
left: 12.5%;
top: 19.41%; }
.image-swiper .z-h5-b1 .z-h5-t2 {
position: absolute;
left: 12.5%;
top: 23.78%; }
.image-swiper .z-h5-b1 .z-h5-t3 {
position: absolute;
left: 12.5%;
top: 32.55%; }
.image-swiper .z-h5-b2 {
width: 27.03%;
position: absolute;
top: 44.66%;
left: 12.5%; }
.image-swiper .z-h5-b3 {
width: 44.48%;
position: absolute;
top: 16.95%;
right: 11.66%; }
.image-swiper .z-h5-c1 {
width: 100%;
height: 0;
padding-bottom: 45.15%;
position: relative;
overflow: hidden; }
.image-swiper .z-h5-c1 > img {
position: absolute;
top: 0;
left: 0;
width: 100%; }
.image-swiper .z-h5-c1 > img:nth-child(1) {
display: block; }
.image-swiper .z-h5-c1 > img:nth-child(2) {
display: none; }
.image-swiper .z-h5-c1 .z-h5-t1 {
position: absolute;
left: 57.55%;
top: 13.72%; }
.image-swiper .z-h5-c1 .z-h5-t2 {
position: absolute;
left: 57.55%;
top: 16.53%; }
.image-swiper .z-h5-c1 .z-h5-t3 {
position: absolute;
left: 57.55%;
top: 23.99%;
color: #000; }
.image-swiper .z-h5-c2 {
width: 31.875%;
position: absolute;
top: 17.99%;
left: 11.92%; }
.image-swiper .z-h5-c3 {
width: 22.4%;
position: absolute;
top: 51.9%;
left: 36.15%; }
.image-swiper .z-h5-c4 {
position: absolute;
left: 61.04%;
top: 32.26%;
width: 360px; }
.image-swiper .z-h5-c4 > div:first-child {
width: 1px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #977cf0; }
.image-swiper .z-h5-c4 > div:last-child {
position: relative;
width: 100%; }
.image-swiper .z-h5-c5 {
width: 100%;
margin-bottom: 16px;
width: 100%;
height: 54px;
position: relative; }
.image-swiper .z-h5-c6 {
width: 5px;
height: 10px;
background: #977cf0;
transition: 0.5s;
position: absolute;
top: calc(50% - 5px);
left: -2px; }
.image-swiper .z-h5-c5:hover .z-h5-c6 {
background: #e50127;
top: calc(50% - 40px);
height: 80px; }
.image-swiper .z-h5-c7 {
width: calc(100% - 6px);
height: 100%;
border: 1px solid rgba(248, 44, 78, 0);
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
box-sizing: border-box;
background: rgba(172, 15, 119, 0);
transition: 0.5s;
margin-left: 6px; }
.image-swiper .z-h5-c5:hover .z-h5-c7 {
border: 1px solid rgba(248, 44, 78, 0.82);
background: #ac0f77;
transition: 0.5s; }
.image-swiper .z-h5-c7 > div:first-child {
font-size: 18px;
line-height: 18px;
color: #fff;
position: absolute;
top: 6px;
left: 48px;
transition: 0.5s; }
.image-swiper .z-h5-c7 > div:last-child {
font-size: 14px;
line-height: 14px;
color: #fff;
position: absolute;
top: 32px;
left: 48px;
font-weight: lighter;
transition: 0.5s; }
.image-swiper .z-h5-c5:hover .z-h5-c7 > div:first-child {
left: 30px;
transition: 0.5s; }
.image-swiper .z-h5-c5:hover .z-h5-c7 > div:last-child {
left: 30px;
transition: 0.5s; }
.image-swiper .z-h5-d1 {
width: 100%;
height: 0;
padding-bottom: 48.22%;
position: relative;
overflow: hidden; }
.image-swiper .z-h5-d1 > img {
width: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-h5-d1 > img:nth-child(1) {
display: block; }
.image-swiper .z-h5-d1 > img:nth-child(2) {
display: none; }
.image-swiper .z-h5-d2 {
width: 12.6%;
position: absolute;
left: -6.3%;
animation: h501 4s linear infinite; }
.image-swiper .z-h5-d3 {
width: 15.83%;
position: absolute;
right: -6.56%;
animation: h502 4s linear infinite; }
@keyframes h501 {
0% {
top: 35.63%; }
50% {
top: 25.63%; }
100% {
top: 35.63%; } }
@keyframes h502 {
0% {
top: 6.47%; }
50% {
top: 20.47%; }
100% {
top: 6.47%; } }
.image-swiper .z-h5-d1 .z-h5-t1 {
position: absolute;
left: 12.5%;
top: 23.75%; }
.image-swiper .z-h5-d1 .z-h5-t2 {
position: absolute;
left: 12.5%;
top: 27.64%; }
.image-swiper .z-h5-d1 .z-h5-t3 {
position: absolute;
left: 12.5%;
top: 35.55%; }
.image-swiper .z-h5-d4 {
width: 33.8%;
position: absolute;
top: 6.26%;
left: 44.75%; }
.image-swiper .z-h5-d5 {
width: 32.18%;
position: absolute;
top: 38.66%;
left: 53.6%; }
.image-swiper .z-h5-d6 {
width: 11.66%;
position: absolute;
top: 39.31%;
left: 38.81%; }
.image-swiper .z-h5-d7 > div {
width: 200%; }
.image-swiper .z-h5-d7 > div:first-child {
position: absolute;
top: 70.19%;
opacity: 0.5;
animation: h503 10s -5s linear infinite; }
.image-swiper .z-h5-d7 > div:last-child {
position: absolute;
top: 67.38%;
opacity: 1;
animation: h504 10s linear infinite; }
@keyframes h503 {
0% {
left: 0; }
100% {
left: -100%; } }
@keyframes h504 {
0% {
right: 0; }
100% {
right: -100%; } }
.image-swiper .z-h5-d8 {
width: 64px;
height: 64px;
border: 0;
border-radius: 50%;
position: absolute; }
.image-swiper .z-h5-d8:nth-child(1) {
top: 62.27%;
left: 14.68%; }
.image-swiper .z-h5-d8:nth-child(2) {
top: 76.67%;
left: 26.77%; }
.image-swiper .z-h5-d8:nth-child(3) {
top: 62.85%;
left: 40.41%; }
.image-swiper .z-h5-d8:nth-child(4) {
top: 75.59%;
left: 54.79%; }
.image-swiper .z-h5-d8:nth-child(5) {
top: 69.11%;
left: 67.29%; }
.image-swiper .z-h5-d8:nth-child(6) {
top: 62.63%;
left: 80.62%; }
.image-swiper .z-h5-d8 > div:nth-child(1) {
width: 100%;
height: 100%;
background: rgba(37, 143, 252, 0.3);
border: 0;
border-radius: 50%;
transition: 0.5s; }
.image-swiper .z-h5-d8:hover > div:nth-child(1) {
background: rgba(251, 167, 8, 0.3);
transition: 0.5s;
animation: h505 2s linear infinite; }
@keyframes h505 {
0% {
transform: scale(1);
opacity: 1; }
100% {
transform: scale(1.5);
opacity: 0; } }
.image-swiper .z-h5-d8 > div:nth-child(2) {
width: 84%;
height: 84%;
position: absolute;
top: 8%;
left: 8%; }
.image-swiper .z-h5-d8 > div:nth-child(2) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: 0.5s; }
.image-swiper .z-h5-d8 > div:nth-child(2) img:first-child {
opacity: 1; }
.image-swiper .z-h5-d8 > div:nth-child(2) img:last-child {
opacity: 0; }
.image-swiper .z-h5-d8:hover > div:nth-child(2) img:first-child {
opacity: 0;
transition: 0.5s; }
.image-swiper .z-h5-d8:hover > div:nth-child(2) img:last-child {
opacity: 1;
transition: 0.5s; }
.image-swiper .z-h5-d8 > div:nth-child(3) {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-h5-d8:nth-child(1) > div:nth-child(3) img {
width: 50%;
position: absolute;
top: 30%;
left: 25%; }
.image-swiper .z-h5-d8:nth-child(2) > div:nth-child(3) img {
width: 44%;
position: absolute;
top: 30%;
left: 28%; }
.image-swiper .z-h5-d8:nth-child(3) > div:nth-child(3) img {
width: 49%;
position: absolute;
top: 25%;
left: 26%; }
.image-swiper .z-h5-d8:nth-child(4) > div:nth-child(3) img {
width: 56%;
position: absolute;
top: 30%;
left: 24%; }
.image-swiper .z-h5-d8:nth-child(5) > div:nth-child(3) img {
width: 50%;
position: absolute;
top: 25%;
left: 25%; }
.image-swiper .z-h5-d8:nth-child(6) > div:nth-child(3) img {
width: 50%;
position: absolute;
top: 32%;
left: 29%; }
.image-swiper .z-h5-d8 > div:nth-child(4) {
font-size: 13px;
line-height: 16px;
color: #258ffc;
text-align: center;
position: absolute;
top: 110%;
left: -50%;
width: 200%; }
.image-swiper .z-h5-e1 {
width: 100%;
position: relative;
overflow: hidden; }
.image-swiper .z-h5-e1 > img {
width: 100%;
position: relative; }
.image-swiper .z-h5-e1 > img:nth-child(1) {
display: block; }
.image-swiper .z-h5-e1 > img:nth-child(2) {
display: none; }
.image-swiper .z-h5-e1 .z-h5-t2 {
top: 11.435%;
left: 0;
width: 100%;
text-align: center; }
.image-swiper .z-h5-e1 .z-h5-t4 {
top: 18.722%;
left: 0;
letter-spacing: 20px;
text-indent: 20px;
width: 100%;
text-align: center; }
.image-swiper .z-h5-e2 {
width: 89.84%;
height: 54.26%;
position: absolute;
top: 31.68%;
left: calc((100% - 89.84%) / 2); }
.image-swiper .swh51 {
width: 100%;
height: 100%; }
.image-swiper .swh51 .swiper-slide {
width: 20% !important;
height: 100%;
position: relative; }
.image-swiper .swh51 .swiper-slide img {
width: 100%;
height: 100%;
transform: rotateY(0deg) scale(0.8);
transform-origin: 50% 50% 0;
transition: 0.5s; }
.image-swiper .swh51 .swiper-slide-next img {
transform: rotateY(60deg) scale(1);
transition: 0.5s;
transform-origin: 0 100% 0;
-webkit-perspective: 400px;
perspective: 400px; }
.image-swiper .swh51 .swiper-slide-prev img {
transform: rotateY(-60deg) scale(1);
transition: 0.5s;
transform-origin: 100% 0 0;
-webkit-perspective: 400px;
perspective: 400px; }
.image-swiper .swh51 .swiper-slide-active img {
transform: rotateY(0deg) scale(1) scaleZ(1);
transform-origin: 50% 50% 0;
transition: 0.5s; }
.image-swiper .next51 {
background: none;
position: absolute;
top: calc(62% - 30px);
width: 35px;
height: 60px; }
.image-swiper .prev51 {
background: none;
position: absolute;
top: calc(62% - 30px);
width: 35px;
height: 60px; }
.image-swiper .next51 > img, .image-swiper .prev51 > img {
position: absolute;
width: 100%;
height: 100%; }
.image-swiper .z-h5-f1 {
width: 100%;
height: 0;
padding-bottom: 33.6979%;
position: relative;
background: #fff;
overflow: hidden; }
.image-swiper .z-h5-f1 .z-h5-t1 {
top: 32.1484%;
left: 12.1875%; }
.image-swiper .z-h5-f1 .z-h5-t2 {
top: 37.0943%;
left: 12.1875%; }
.image-swiper .z-h5-f1 .z-h5-t3 {
top: 47.9042%;
left: 12.1875%; }
.image-swiper .z-h5-f2 {
width: 5.2083%;
position: absolute;
top: 24.4204%;
left: 60.8854%; }
.image-swiper .z-h5-f3 {
width: 26.5625%;
position: absolute;
top: 12.983%;
right: 12.7083%; }
.image-swiper .sw52 {
display: none; } }
@media only screen and (max-width: 1023px) {
.image-swiper .z-h5-t1 {
width: 0.83rem;
height: 2px;
background: #d51920;
position: absolute; }
.image-swiper .z-h5-t2 {
font-size: 0.52rem;
line-height: 0.52rem;
color: #000;
position: absolute;
font-weight: bold; }
.image-swiper .z-h5-t2 span {
color: #d51920; }
.image-swiper .z-h5-t3 {
font-size: 0.3rem;
line-height: 0.46rem;
color: #333333;
font-family: "yuanjian";
position: absolute; }
.image-swiper .z-h5-t4 {
font-size: 0.3rem;
line-height: 0.46rem;
color: #333333;
position: absolute;
font-family: "yuanjian"; }
.image-swiper .z-h5-t5 {
font-size: 0.22rem;
line-height: 0.32rem;
color: #fff;
position: absolute;
font-family: "yuanjian"; }
.image-swiper .z-h5-a1 {
width: 100%;
height: 9.26rem;
position: relative;
overflow: hidden; }
.image-swiper .z-h5-a1 > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.image-swiper .z-h5-a1 > img:nth-child(1) {
display: none; }
.image-swiper .z-h5-a1 > img:nth-child(2) {
display: block; }
.image-swiper .z-h5-a1 .z-h5-t1 {
top: 5.65rem;
right: 0.55rem; }
.image-swiper .z-h5-a1 .z-h5-t2 {
top: 6.04rem;
right: 0.55rem;
color: #fff; }
.image-swiper .z-h5-a1 .z-h5-t3 {
top: 6.75rem;
right: 0.55rem;
color: #fff; }
.image-swiper .z-h5-a1 .z-h5-t5 {
top: 7.4rem;
right: 0.55rem;
text-align: right; }
.image-swiper .z-h5-a2 {
width: 6.14rem;
position: absolute;
top: 1.1rem;
left: 0.5rem; }
.image-swiper .z-h5-a3 {
width: 1.72rem;
position: absolute;
top: 2.22rem;
right: 0.62rem; }
.image-swiper .z-h5-a4 {
width: 0.72rem;
position: absolute;
top: 3.36rem;
right: 2.14rem; }
.image-swiper .z-h5-b1 {
width: 100%;
height: 8.72rem;
position: relative;
overflow: hidden; }
.image-swiper .z-h5-b1 .z-h5-t1 {
position: absolute;
left: 0.24rem;
top: 1.14rem; }
.image-swiper .z-h5-b1 .z-h5-t2 {
position: absolute;
left: 0.24rem;
top: 1.48rem; }
.image-swiper .z-h5-b1 .z-h5-t3 {
position: absolute;
left: 0.24rem;
top: 2.12rem; }
.image-swiper .z-h5-b2 {
width: 4.12rem;
position: absolute;
top: 3.5rem;
left: 0.24rem; }
.image-swiper .z-h5-b3 {
width: 4.94rem;
position: absolute;
top: 4.75rem;
right: 0.24rem; }
.image-swiper .z-h5-c1 {
width: 100%;
height: 12.82rem;
position: relative;
overflow: hidden; }
.image-swiper .z-h5-c1 > img {
position: absolute;
top: 0;
left: 0;
width: 100%; }
.image-swiper .z-h5-c1 > img:nth-child(1) {
display: none; }
.image-swiper .z-h5-c1 > img:nth-child(2) {
display: block; }
.image-swiper .z-h5-c1 .z-h5-t1 {
position: absolute;
left: 0.24rem;
top: 1.08rem; }
.image-swiper .z-h5-c1 .z-h5-t2 {
position: absolute;
left: 0.24rem;
top: 1.48rem; }
.image-swiper .z-h5-c1 .z-h5-t3 {
position: absolute;
left: 0.24rem;
top: 2.06rem;
color: #000; }
.image-swiper .z-h5-c2 {
width: 4.8rem;
position: absolute;
top: 2.88rem;
left: 0.24rem; }
.image-swiper .z-h5-c3 {
width: 3.38rem;
position: absolute;
top: 5.2rem;
right: 0.24rem; }
.image-swiper .z-h5-c4 {
position: absolute;
left: 0.28rem;
top: 7.64rem;
width: calc(100% - 0.52rem); }
.image-swiper .z-h5-c4 > div:first-child {
width: 1px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #977cf0; }
.image-swiper .z-h5-c4 > div:last-child {
position: relative;
width: 100%; }
.image-swiper .z-h5-c5 {
width: 100%;
margin-bottom: 0.24rem;
width: 100%;
height: 0.86rem;
position: relative; }
.image-swiper .z-h5-c6 {
width: 0.05rem;
height: 0.1rem;
background: #977cf0;
position: absolute;
top: calc(50% - 0.05rem);
left: -0.02rem; }
.image-swiper .z-h5-c7 {
width: calc(100% - 6px);
height: 100%;
border: 1px solid rgba(248, 44, 78, 0);
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
box-sizing: border-box;
background: rgba(172, 15, 119, 0);
margin-left: 6px; }
.image-swiper .z-h5-c7 > div:first-child {
font-size: 0.3rem;
line-height: 0.3rem;
color: #fff;
position: absolute;
top: 0.16rem;
left: 1.04rem; }
.image-swiper .z-h5-c7 > div:last-child {
font-size: 0.24rem;
line-height: 0.24rem;
color: #fff;
position: absolute;
top: 0.48rem;
left: 1.04rem;
font-weight: lighter; }
.image-swiper .z-h5-d1 {
width: 100%;
height: 12.32rem;
position: relative;
overflow: hidden; }
.image-swiper .z-h5-d1 > img {
width: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-h5-d1 > img:nth-child(1) {
display: none; }
.image-swiper .z-h5-d1 > img:nth-child(2) {
display: block; }
.image-swiper .z-h5-d2 {
width: 2.4rem;
position: absolute;
left: -1.2rem;
animation: h501 4s linear infinite; }
.image-swiper .z-h5-d3 {
width: 3.04rem;
position: absolute;
right: -1.52rem;
animation: h502 4s linear infinite; }
@keyframes h501 {
0% {
top: 5.45rem; }
50% {
top: 3.95rem; }
100% {
top: 5.45rem; } }
@keyframes h502 {
0% {
top: 1.28rem; }
50% {
top: 3.28rem; }
100% {
top: 1.28rem; } }
.image-swiper .z-h5-d1 .z-h5-t1 {
position: absolute;
left: 0.24rem;
top: 1.26rem; }
.image-swiper .z-h5-d1 .z-h5-t2 {
position: absolute;
left: 0.24rem;
top: 1.62rem; }
.image-swiper .z-h5-d1 .z-h5-t3 {
position: absolute;
left: 0.24rem;
top: 2.28rem; }
.image-swiper .z-h5-d4 {
width: 5.06rem;
position: absolute;
top: 2.94rem;
left: 1.14rem; }
.image-swiper .z-h5-d5 {
width: 4.82rem;
position: absolute;
top: 5.12rem;
right: 0.24rem; }
.image-swiper .z-h5-d6 {
width: 1.6rem;
position: absolute;
top: 5.16rem;
left: 0.24rem; }
.image-swiper .z-h5-d7 > div {
width: 200%; }
.image-swiper .z-h5-d7 > div:first-child {
position: absolute;
top: 6.2rem;
opacity: 0.5;
animation: h503 10s -5s linear infinite; }
.image-swiper .z-h5-d7 > div:last-child {
position: absolute;
top: 5.96rem;
opacity: 1;
animation: h504 10s linear infinite; }
@keyframes h503 {
0% {
left: 0; }
100% {
left: -100%; } }
@keyframes h504 {
0% {
right: 0; }
100% {
right: -100%; } }
.image-swiper .z-h5-d8 {
width: 1rem;
height: 1rem;
border: 0;
border-radius: 50%;
position: absolute; }
.image-swiper .z-h5-d8:nth-child(1) {
top: 8rem;
left: calc((50% - ((100% - 0.48rem)/3)) - 0.5rem); }
.image-swiper .z-h5-d8:nth-child(2) {
top: 8rem;
left: calc(50% - 0.5rem); }
.image-swiper .z-h5-d8:nth-child(3) {
top: 8rem;
right: calc((50% - ((100% - 0.48rem)/3)) - 0.5rem); }
.image-swiper .z-h5-d8:nth-child(4) {
top: 9.96rem;
left: calc((50% - ((100% - 0.48rem)/3)) - 0.5rem); }
.image-swiper .z-h5-d8:nth-child(5) {
top: 9.96rem;
left: calc(50% - 0.5rem); }
.image-swiper .z-h5-d8:nth-child(6) {
top: 9.96rem;
right: calc((50% - ((100% - 0.48rem)/3)) - 0.5rem); }
.image-swiper .z-h5-d8 > div:nth-child(1) {
width: 100%;
height: 100%;
background: rgba(37, 143, 252, 0.3);
border: 0;
border-radius: 50%; }
.image-swiper .z-h5-d8 > div:nth-child(2) {
width: 84%;
height: 84%;
position: absolute;
top: 8%;
left: 8%; }
.image-swiper .z-h5-d8 > div:nth-child(2) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.image-swiper .z-h5-d8 > div:nth-child(2) img:first-child {
opacity: 1; }
.image-swiper .z-h5-d8 > div:nth-child(2) img:last-child {
opacity: 0; }
.image-swiper .z-h5-d8 > div:nth-child(3) {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-h5-d8:nth-child(1) > div:nth-child(3) img {
width: 50%;
position: absolute;
top: 30%;
left: 25%; }
.image-swiper .z-h5-d8:nth-child(2) > div:nth-child(3) img {
width: 44%;
position: absolute;
top: 30%;
left: 28%; }
.image-swiper .z-h5-d8:nth-child(3) > div:nth-child(3) img {
width: 49%;
position: absolute;
top: 25%;
left: 26%; }
.image-swiper .z-h5-d8:nth-child(4) > div:nth-child(3) img {
width: 56%;
position: absolute;
top: 30%;
left: 24%; }
.image-swiper .z-h5-d8:nth-child(5) > div:nth-child(3) img {
width: 50%;
position: absolute;
top: 25%;
left: 25%; }
.image-swiper .z-h5-d8:nth-child(6) > div:nth-child(3) img {
width: 50%;
position: absolute;
top: 32%;
left: 29%; }
.image-swiper .z-h5-d8 > div:nth-child(4) {
font-size: 0.24rem;
line-height: 0.3rem;
color: #258ffc;
text-align: center;
position: absolute;
top: 1.2rem;
left: -75%;
width: 250%; }
.image-swiper .z-h5-e1 {
width: 100%;
height: 8.82rem;
position: relative;
overflow: hidden; }
.image-swiper .z-h5-e1 > img {
width: 100%;
position: relative; }
.image-swiper .z-h5-e1 > img:nth-child(1) {
display: none; }
.image-swiper .z-h5-e1 > img:nth-child(2) {
display: block; }
.image-swiper .z-h5-e1 .z-h5-t2 {
top: 1.26rem;
left: 0;
width: 100%;
text-align: center; }
.image-swiper .z-h5-e1 .z-h5-t4 {
top: 1.9rem;
left: 0;
letter-spacing: 0;
text-indent: 0;
width: 100%;
text-align: center; }
.image-swiper .z-h5-e2 {
width: calc(100% - 0.48rem);
height: 5rem;
position: absolute;
top: 2.8rem;
left: 0.24rem; }
.image-swiper .swh51 {
width: 100%;
height: 100%; }
.image-swiper .swh51 .swiper-slide {
width: 3.56rem !important;
height: 100%;
position: relative; }
.image-swiper .swh51 .swiper-slide img {
width: 100%;
height: 100%; }
.image-swiper .next51 {
background: none;
position: absolute;
top: calc(66% - 0.4rem);
width: 0.47rem;
height: 0.8rem; }
.image-swiper .prev51 {
background: none;
position: absolute;
top: calc(66% - 0.4rem);
width: 0.47rem;
height: 0.8rem; }
.image-swiper .next51 > img, .image-swiper .prev51 > img {
position: absolute;
width: 100%;
height: 100%; }
.image-swiper .z-h5-f1 {
width: 100%;
height: 10.14rem;
position: relative;
background: #fff;
overflow: hidden; }
.image-swiper .z-h5-f1 .z-h5-t1 {
top: 1.1rem;
left: 0.24rem; }
.image-swiper .z-h5-f1 .z-h5-t2 {
top: 1.4rem;
left: 0.24rem;
white-space: nowrap;
font-size: 0.46rem; }
.image-swiper .z-h5-f1 .z-h5-t3 {
top: 2rem;
left: 0.24rem; }
.image-swiper .z-h5-f2 {
width: 1.18rem;
position: absolute;
top: 4.3rem;
left: 0.78rem; }
.image-swiper .z-h5-f3 {
width: 6.06rem;
position: absolute;
top: 3.38rem;
right: 0.74rem; } }
@media only screen and (min-width: 1440px) {
.image-swiper .z-cas2-d1 {
width: 93.75%;
position: relative;
margin: 0 auto; }
.image-swiper .z-cas2-d2 {
width: 15.56%;
position: absolute; }
.image-swiper .z-cas2-d3 {
width: 100%;
position: relative;
background: #fff;
padding: 0 20px;
padding-top: 36px;
box-sizing: border-box;
height: 100px;
border-bottom: 1px solid #e9e9e9;
box-sizing: border-box; }
.image-swiper .z-cas2-d4 {
width: 100%;
font-size: 14px;
line-height: 16px;
color: #333333;
font-weight: lighter;
margin-bottom: 15px; }
.image-swiper .z-cas2-d5 {
display: inline-block;
font-size: 12px;
line-height: 12px;
color: #807474;
font-weight: lighter;
margin-right: 14px; }
.image-swiper .z-cas2-d5 img {
width: 18px;
margin-right: 4px;
display: inline-block;
cursor: pointer; }
.image-swiper .z-cas2-d5 img:nth-child(1) {
display: inline-block; }
.image-swiper .z-cas2-d5 img:nth-child(2) {
display: none; }
.image-swiper .z-cas2-d6 {
display: inline-block;
font-size: 12px;
line-height: 12px;
color: #807474;
font-weight: lighter; }
.image-swiper .z-cas2-d6 img {
width: 13px;
margin-right: 4px;
display: inline-block;
cursor: pointer; }
.image-swiper .z-cas2-d6 img:nth-child(1) {
display: inline-block; }
.image-swiper .z-cas2-d6 img:nth-child(2) {
display: none; }
.image-swiper .z-cas2-d7 {
width: 100%;
height: 54px;
padding: 0 20px;
box-sizing: border-box;
background: #fff; }
.image-swiper .z-cas2-d7:first-child {
font-size: 12px;
line-height: 54px;
color: #807474;
float: left;
font-weight: lighter; }
.image-swiper .z-cas2-d7:first-child span {
color: #d51920; }
.image-swiper .z-cas2-d7:last-child {
font-size: 12px;
line-height: 54px;
color: #999999;
float: right;
font-weight: lighter; } }
@media only screen and (max-width: 1439px) and (min-width: 1270px) {
.image-swiper .z-cas2-d1 {
width: 93.75%;
position: relative;
margin: 0 auto; }
.image-swiper .z-cas2-d2 {
width: 19%;
position: absolute; }
.image-swiper .z-cas2-d3 {
width: 100%;
position: relative;
background: #fff;
padding: 0 20px;
padding-top: 36px;
box-sizing: border-box;
height: 100px;
border-bottom: 1px solid #e9e9e9;
box-sizing: border-box; }
.image-swiper .z-cas2-d4 {
width: 100%;
font-size: 14px;
line-height: 16px;
color: #333333;
font-weight: lighter;
margin-bottom: 15px; }
.image-swiper .z-cas2-d5 {
display: inline-block;
font-size: 12px;
line-height: 12px;
color: #807474;
font-weight: lighter;
margin-right: 14px; }
.image-swiper .z-cas2-d5 img {
width: 18px;
margin-right: 4px;
display: inline-block;
cursor: pointer; }
.image-swiper .z-cas2-d5 img:nth-child(1) {
display: inline-block; }
.image-swiper .z-cas2-d5 img:nth-child(2) {
display: none; }
.image-swiper .z-cas2-d6 {
display: inline-block;
font-size: 12px;
line-height: 12px;
color: #807474;
font-weight: lighter; }
.image-swiper .z-cas2-d6 img {
width: 13px;
margin-right: 4px;
display: inline-block;
cursor: pointer; }
.image-swiper .z-cas2-d6 img:nth-child(1) {
display: inline-block; }
.image-swiper .z-cas2-d6 img:nth-child(2) {
display: none; }
.image-swiper .z-cas2-d7 {
width: 100%;
height: 54px;
padding: 0 20px;
box-sizing: border-box;
background: #fff; }
.image-swiper .z-cas2-d7:first-child {
font-size: 12px;
line-height: 54px;
color: #807474;
float: left;
font-weight: lighter; }
.image-swiper .z-cas2-d7:first-child span {
color: #d51920; }
.image-swiper .z-cas2-d7:last-child {
font-size: 12px;
line-height: 54px;
color: #999999;
float: right;
font-weight: lighter; } }
@media only screen and (max-width: 1269px) and (min-width: 1024px) {
.image-swiper .z-cas2-d1 {
width: 93.75%;
position: relative;
margin: 0 auto; }
.image-swiper .z-cas2-d2 {
width: 23.5%;
position: absolute; }
.image-swiper .z-cas2-d3 {
width: 100%;
position: relative;
background: #fff;
padding: 0 20px;
padding-top: 36px;
box-sizing: border-box;
height: 100px;
border-bottom: 1px solid #e9e9e9;
box-sizing: border-box; }
.image-swiper .z-cas2-d4 {
width: 100%;
font-size: 14px;
line-height: 16px;
color: #333333;
font-weight: lighter;
margin-bottom: 15px; }
.image-swiper .z-cas2-d5 {
display: inline-block;
font-size: 12px;
line-height: 12px;
color: #807474;
font-weight: lighter;
margin-right: 14px; }
.image-swiper .z-cas2-d5 img {
width: 18px;
margin-right: 4px;
display: inline-block;
cursor: pointer; }
.image-swiper .z-cas2-d5 img:nth-child(1) {
display: inline-block; }
.image-swiper .z-cas2-d5 img:nth-child(2) {
display: none; }
.image-swiper .z-cas2-d6 {
display: inline-block;
font-size: 12px;
line-height: 12px;
color: #807474;
font-weight: lighter; }
.image-swiper .z-cas2-d6 img {
width: 13px;
margin-right: 4px;
display: inline-block;
cursor: pointer; }
.image-swiper .z-cas2-d6 img:nth-child(1) {
display: inline-block; }
.image-swiper .z-cas2-d6 img:nth-child(2) {
display: none; }
.image-swiper .z-cas2-d7 {
width: 100%;
height: 54px;
padding: 0 20px;
box-sizing: border-box;
background: #fff; }
.image-swiper .z-cas2-d7:first-child {
font-size: 12px;
line-height: 54px;
color: #807474;
float: left;
font-weight: lighter; }
.image-swiper .z-cas2-d7:first-child span {
color: #d51920; }
.image-swiper .z-cas2-d7:last-child {
font-size: 12px;
line-height: 54px;
color: #999999;
float: right;
font-weight: lighter; } }
@media only screen and (max-width: 1023px) {
.image-swiper .z-cas2-d1 {
width: calc(100% - 0.48rem);
position: relative;
margin: 0 auto; }
.image-swiper .z-cas2-d2 {
width: calc(50% - 0.24rem);
position: absolute; }
.image-swiper .z-cas2-d3 {
width: 100%;
position: relative;
background: #fff;
padding: 0 20px;
padding-top: 36px;
box-sizing: border-box;
height: 100px;
border-bottom: 1px solid #e9e9e9;
box-sizing: border-box; }
.image-swiper .z-cas2-d4 {
width: 100%;
font-size: 14px;
line-height: 16px;
color: #333333;
font-weight: lighter;
margin-bottom: 15px; }
.image-swiper .z-cas2-d5 {
display: inline-block;
font-size: 12px;
line-height: 12px;
color: #807474;
font-weight: lighter;
margin-right: 14px; }
.image-swiper .z-cas2-d5 img {
width: 18px;
margin-right: 4px;
display: inline-block;
cursor: pointer; }
.image-swiper .z-cas2-d5 img:nth-child(1) {
display: inline-block; }
.image-swiper .z-cas2-d5 img:nth-child(2) {
display: none; }
.image-swiper .z-cas2-d6 {
display: inline-block;
font-size: 12px;
line-height: 12px;
color: #807474;
font-weight: lighter; }
.image-swiper .z-cas2-d6 img {
width: 13px;
margin-right: 4px;
display: inline-block;
cursor: pointer; }
.image-swiper .z-cas2-d6 img:nth-child(1) {
display: inline-block; }
.image-swiper .z-cas2-d6 img:nth-child(2) {
display: none; }
.image-swiper .z-cas2-d7 {
width: 100%;
height: 54px;
padding: 0 20px;
box-sizing: border-box;
background: #fff; }
.image-swiper .z-cas2-d7:first-child {
font-size: 12px;
line-height: 54px;
color: #807474;
float: left;
font-weight: lighter; }
.image-swiper .z-cas2-d7:first-child span {
color: #d51920; }
.image-swiper .z-cas2-d7:last-child {
font-size: 12px;
line-height: 54px;
color: #999999;
float: right;
font-weight: lighter; } }
@media only screen and (min-width: 1440px) {
.image-swiper .z-f1-d1 {
width: 100%;
height: 890px;
position: relative;
overflow: hidden; }
.image-swiper .swiper1 {
width: 1920px !important;
height: 100%;
position: absolute;
top: 0;
left: calc(50% - 960px); }
.image-swiper .swiper1 .swiper-slide {
width: 100% !important;
position: relative; }
.image-swiper .swiper1 .swiper-slide > img {
width: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f1-d1 > img {
width: 1920px;
position: absolute;
top: 0;
left: calc(50% - 960px);
opacity: 0.15; }
.image-swiper .z-f1-p1 {
height: 140px;
font-size: 140px;
line-height: 140px;
color: #FFFFFF;
font-family: "tcm";
position: absolute;
top: 276px;
left: calc(50% - 706px); }
.image-swiper .z-f1-p2 {
height: 48px;
font-size: 48px;
line-height: 48px;
color: #FFFFFF;
font-weight: lighter;
position: absolute;
top: 460px;
left: calc(50% - 706px); }
.image-swiper .z-f1-p3 {
height: 30px;
font-size: 30px;
line-height: 30px;
color: #FFFFFF;
font-weight: lighter;
position: absolute;
top: 546px;
left: calc(50% - 706px); }
.image-swiper .z-f1-i1 {
width: 819px;
position: absolute;
top: 198px;
right: calc(50% - 706px); }
.image-swiper .z-f10-d1 {
width: 100%;
height: 210px;
position: relative; }
.image-swiper .z-f10-p1 {
width: 100%;
position: absolute;
top: 78px;
left: 0;
font-size: 42px;
line-height: 42px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f10-p2 {
width: 100%;
position: absolute;
top: 142px;
left: 0;
font-size: 18px;
line-height: 18px;
color: #666666;
text-align: center; }
.image-swiper .z-f10-d2 {
width: 100%;
height: 678px;
position: relative;
background: #f3f3f3;
overflow: hidden; }
.image-swiper .z-f10-d3 {
width: 1420px;
position: absolute;
top: 50px;
left: calc(50% - 710px); }
.image-swiper .z-f10-d4 {
width: 452px;
height: 264px;
position: relative;
float: left;
margin-right: 32px;
margin-bottom: 40px;
border: 0;
border-radius: 6px;
background: #fff;
overflow: hidden; }
.image-swiper .z-f10-d4:nth-child(3n) {
margin-right: 0; }
.image-swiper .z-f10-i1 {
width: 100%;
height: 123px;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f10-i2 {
width: 92px;
height: 92px;
position: absolute;
top: 16px;
left: 96px;
border: 0;
border-radius: 50%;
transition: 0.5s; }
.image-swiper .z-f10-d4:hover .z-f10-i2 {
transform: rotateY(360deg);
transition: 0.5s; }
.image-swiper .z-f10-p3 {
font-size: 20px;
line-height: 22px;
color: #fff;
position: absolute;
top: 44px;
left: 225px; }
.image-swiper .z-f10-p3 span {
font-family: "din";
font-size: 36px;
line-height: 22px;
color: #fff;
position: relative;
top: 4px; }
.image-swiper .z-f10-p4 {
width: 396px;
font-size: 15px;
line-height: 26px;
color: #434343;
position: absolute;
top: 150px;
left: calc((100% - 396px) / 2); }
.image-swiper .z-f2-d1 {
width: 100%;
height: 210px;
position: relative; }
.image-swiper .z-f2-p1 {
width: 100%;
position: absolute;
top: 78px;
left: 0;
font-size: 42px;
line-height: 42px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f2-p2 {
width: 100%;
position: absolute;
top: 142px;
left: 0;
font-size: 18px;
line-height: 18px;
color: #666666;
text-align: center; }
.image-swiper .z-f2-d2 {
width: 100%;
height: 750px;
position: relative;
background: #f3f3f3;
overflow: hidden; }
.image-swiper .z-f2-d2 > img {
width: 1920px;
position: absolute;
top: 0;
left: calc(50% - 960px); }
.image-swiper .z-f2-d3 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f2-i1 {
position: absolute; }
.image-swiper .z-f2-i1:nth-child(1) {
width: 214px;
top: 99px;
left: calc(50% - (960px - 858px)); }
.image-swiper .z-f2-i1:nth-child(2) {
width: 214px;
top: 196px;
left: calc(50% - (960px - 790px)); }
.image-swiper .z-f2-i1:nth-child(3) {
width: 213px;
top: 305px;
left: calc(50% - (960px - 739px)); }
.image-swiper .z-f2-i1:nth-child(4) {
width: 375px;
top: 403px;
left: calc(50% - (960px - 793px)); }
.image-swiper .z-f2-d4 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f2-d5 {
position: absolute;
width: 480px; }
.image-swiper .z-f2-d5:nth-child(1) {
top: 125px;
left: calc(50% - 706px); }
.image-swiper .z-f2-d5:nth-child(2) {
top: 125px;
right: calc(50% - 706px); }
.image-swiper .z-f2-d5:nth-child(3) {
top: 425px;
left: calc(50% - 706px); }
.image-swiper .z-f2-d5:nth-child(4) {
top: 425px;
right: calc(50% - 706px); }
.image-swiper .z-f2-p3 {
padding: 0 24px;
height: 50px;
border: 0;
border-radius: 4px;
background: #36b9c8;
margin-bottom: 24px;
font-size: 22px;
line-height: 50px;
color: #fff;
width: auto !important; }
.image-swiper .z-f2-p3 span {
font-family: "din";
font-size: 30px;
line-height: 30px;
color: #fff;
position: relative;
top: 4px; }
.image-swiper .z-f2-p4 {
font-size: 16px;
line-height: 28px;
color: #fff;
width: 100%; }
.image-swiper .z-f9-d1 {
width: 100%;
height: 210px;
position: relative; }
.image-swiper .z-f9-p1 {
width: 100%;
position: absolute;
top: 78px;
left: 0;
font-size: 42px;
line-height: 42px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f9-p2 {
width: 100%;
position: absolute;
top: 142px;
left: 0;
font-size: 18px;
line-height: 18px;
color: #666666;
text-align: center; }
.image-swiper .z-f9-d2 {
width: 100%;
height: 648px;
position: relative;
background: #edf3fe;
overflow: hidden; }
.image-swiper .z-f9-d3 {
width: 720px;
position: absolute;
top: 80px;
left: calc(50% - 720px); }
.image-swiper .z-f9-i1 {
float: right; }
.image-swiper .z-f9-i1:nth-child(1) {
margin-right: -28px; }
.image-swiper .z-f9-i1:nth-child(2) {
padding-top: 70px;
margin-right: -140px; }
.image-swiper .z-f9-i1:nth-child(3) {
padding-top: 18px;
margin-right: -10px; }
.image-swiper .z-f9-i1:nth-child(4) {
padding-top: 40px;
margin-right: -70px; }
.image-swiper .z-f9-p3 {
font-size: 36px;
line-height: 36px;
color: #454545;
position: absolute;
top: 72px;
left: calc(50% + 18px); }
.image-swiper .z-f9-d4 {
position: absolute;
left: calc(50% + 18px);
top: 148px; }
.image-swiper .z-f9-d5 {
width: 684px;
height: 90px;
border: 1px solid #c7ced9;
border-radius: 5px;
box-sizing: border-box;
margin-bottom: 22px;
position: relative;
background: #ffffff; }
.image-swiper .z-f9-i2 {
position: absolute; }
.image-swiper .z-f9-d5:nth-child(1) .z-f9-i2 {
top: 14px;
left: 30px; }
.image-swiper .z-f9-d5:nth-child(2) .z-f9-i2 {
top: 17px;
right: 57px; }
.image-swiper .z-f9-d5:nth-child(3) .z-f9-i2 {
top: 21px;
left: 35px; }
.image-swiper .z-f9-d5:nth-child(4) .z-f9-i2 {
top: 17px;
right: 60px; }
.image-swiper .z-f9-p4 {
font-size: 24px;
line-height: 88px;
color: #3e3a39;
position: absolute;
top: 0; }
.image-swiper .z-f9-d5:nth-child(odd) .z-f9-p4 {
left: 112px; }
.image-swiper .z-f9-d5:nth-child(even) .z-f9-p4 {
right: 174px; }
.image-swiper .z-f9-p5 {
font-size: 16px;
line-height: 88px;
color: #3e3a39;
position: absolute;
top: 0; }
.image-swiper .z-f9-d5:nth-child(odd) .z-f9-p5 {
left: 230px; }
.image-swiper .z-f9-d5:nth-child(even) .z-f9-p5 {
right: 300px; }
.image-swiper .z-f7-d1 {
width: 100%;
height: 210px;
position: relative; }
.image-swiper .z-f7-p1 {
width: 100%;
position: absolute;
top: 78px;
left: 0;
font-size: 42px;
line-height: 42px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f7-p2 {
width: 100%;
position: absolute;
top: 142px;
left: 0;
font-size: 18px;
line-height: 18px;
color: #666666;
text-align: center; }
.image-swiper .z-f7-d2 {
width: 100%;
position: relative;
overflow: hidden;
height: 694px; }
.image-swiper .z-f7-d2 > img {
width: 1920px;
position: absolute;
top: 0;
left: calc(50% - 960px); }
.image-swiper .z-f7-p3 {
position: absolute;
top: 100px;
left: calc(50% - 706px);
font-size: 36px;
line-height: 36px;
color: #fff; }
.image-swiper .z-f7-d3 {
position: absolute;
top: 186px;
left: calc(50% - 706px);
width: 720px; }
.image-swiper .z-f7-d4 {
width: 360px;
height: 66px;
position: relative;
margin-bottom: 40px;
float: left; }
.image-swiper .z-f7-i1 {
width: 66px;
height: 66px;
position: absolute;
top: 0;
left: 0;
border: 0;
border-radius: 50%;
transition: 0.5s; }
.image-swiper .z-f7-d4:hover .z-f7-i1 {
transform: rotateY(360deg);
transition: 0.5s; }
.image-swiper .z-f7-p4 {
font-size: 20px;
line-height: 20px;
color: #fff;
position: absolute;
top: 8px;
left: 84px; }
.image-swiper .z-f7-p5 {
font-size: 15px;
line-height: 15px;
color: #fff;
position: absolute;
top: 44px;
left: 84px;
white-space: nowrap; }
.image-swiper .z-f7-i2 {
width: 680px;
position: absolute;
top: 156px;
right: calc(50% - 706px); }
.image-swiper .z-f3-d1 {
width: 100%;
height: 420px;
position: relative;
overflow: hidden; }
.image-swiper .z-f3-p1 {
width: 100%;
position: absolute;
top: 80px;
left: 0;
font-size: 42px;
line-height: 42px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f3-p2 {
width: 100%;
position: absolute;
top: 146px;
left: 0;
font-size: 18px;
line-height: 18px;
color: #666666;
text-align: center; }
.image-swiper .z-f3-d2 {
width: 1420px;
position: absolute;
top: 220px;
left: calc(50% - 710px); }
.image-swiper .z-f3-d3 {
width: 236px;
float: left; }
.image-swiper .z-f3-i1 {
width: 106px;
height: 106px;
border: 0;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
position: relative;
transition: 0.5s;
margin-bottom: 28px; }
.image-swiper .z-f3-d3:hover .z-f3-i1 {
transform: rotateY(360deg);
transition: 0.5s; }
.image-swiper .z-f3-i1 img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f3-p3 {
width: 100%;
font-size: 18px;
line-height: 18px;
color: #3f3e41;
text-align: center;
margin-bottom: 18px; }
.image-swiper .z-f3-p4 {
width: 100%;
font-size: 16px;
line-height: 16px;
color: #7f7f7f;
text-align: center; }
.image-swiper .z-f8-d1 {
width: 100%;
height: 210px;
position: relative; }
.image-swiper .z-f8-p1 {
width: 100%;
position: absolute;
top: 78px;
left: 0;
font-size: 42px;
line-height: 42px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f8-p2 {
width: 100%;
position: absolute;
top: 142px;
left: 0;
font-size: 18px;
line-height: 18px;
color: #666666;
text-align: center; }
.image-swiper .z-f8-d2 {
width: 100%;
height: 824px;
position: relative;
overflow: hidden; }
.image-swiper .z-f8-d2 > img {
position: absolute;
top: 0;
left: calc(50% - 960px);
width: 1920px; }
.image-swiper .z-f8-d3 {
width: 1022px;
margin: 0 auto;
padding-top: 60px;
display: flex;
justify-content: space-between; }
.image-swiper .z-f8-d3 > div {
width: 137px; }
.image-swiper .z-f8-d3 > div:nth-child(1) {
width: 162px; }
.image-swiper .z-f8-d3 > div img {
width: 100%; }
.image-swiper .z-f4-d1 {
width: 100%;
height: 210px;
position: relative; }
.image-swiper .z-f4-p1 {
width: 100%;
position: absolute;
top: 78px;
left: 0;
font-size: 42px;
line-height: 42px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f4-p2 {
width: 100%;
position: absolute;
top: 144px;
left: 0;
font-size: 18px;
line-height: 18px;
color: #666666;
text-align: center; }
.image-swiper .z-f4-d2 {
width: 100%;
height: 540px;
position: relative;
overflow: hidden;
background: #f8f8f8; }
.image-swiper .z-f4-d4 {
width: 1412px;
position: absolute;
top: 85px;
left: calc(50% - 706px); }
.image-swiper .z-f4-d3 {
width: 680px;
height: 136px;
position: relative;
border: 0;
border-radius: 10px;
background: #fff;
margin-bottom: 70px;
overflow: hidden;
box-shadow: 0 0 20px rgba(44, 88, 167, 0.1); }
.image-swiper .z-f4-d3:nth-child(odd) {
float: left; }
.image-swiper .z-f4-d3:nth-child(even) {
float: right; }
.image-swiper .z-f4-i1 {
position: absolute;
transition: 0.5s; }
.image-swiper .z-f4-d3:hover .z-f4-i1 {
transform: rotateY(360deg);
transition: 0.5s; }
.image-swiper .z-f4-d3:nth-child(1) .z-f4-i1 {
width: 68px;
top: calc(50% - 31px);
left: 154px; }
.image-swiper .z-f4-d3:nth-child(2) .z-f4-i1 {
width: 62px;
top: calc(50% - 29px);
left: 126px; }
.image-swiper .z-f4-d3:nth-child(3) .z-f4-i1 {
width: 66px;
top: calc(50% - 32px);
left: 158px; }
.image-swiper .z-f4-d3:nth-child(4) .z-f4-i1 {
width: 58px;
top: calc(50% - 29px);
left: 128px; }
.image-swiper .z-f4-p3 {
font-size: 24px;
line-height: 136px;
color: #4c4948;
position: absolute;
top: 0; }
.image-swiper .z-f4-d3:nth-child(1) .z-f4-p3 {
left: 254px; }
.image-swiper .z-f4-d3:nth-child(2) .z-f4-p3 {
left: 228px; }
.image-swiper .z-f4-d3:nth-child(3) .z-f4-p3 {
left: 254px; }
.image-swiper .z-f4-d3:nth-child(4) .z-f4-p3 {
left: 228px; }
.image-swiper .z-f5-d1 {
width: 100%;
height: 210px;
position: relative; }
.image-swiper .z-f5-p1 {
width: 100%;
position: absolute;
top: 78px;
left: 0;
font-size: 42px;
line-height: 42px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f5-p2 {
width: 100%;
position: absolute;
top: 144px;
left: 0;
font-size: 18px;
line-height: 18px;
color: #666666;
text-align: center; }
.image-swiper .z-f5-d2 {
width: 100%;
height: 900px;
position: relative;
overflow: hidden; }
.image-swiper .z-f5-d2 > img {
width: 1920px;
position: absolute;
top: 0;
left: calc(50% - 960px); }
.image-swiper .z-f5-d3 {
width: 1412px;
position: absolute;
top: 110px;
left: calc(50% - 706px); }
.image-swiper .z-f5-d4 {
width: 680px;
height: 136px;
position: relative;
margin-bottom: 58px; }
.image-swiper .z-f5-d4:nth-child(odd) {
float: left; }
.image-swiper .z-f5-d4:nth-child(even) {
float: right; }
.image-swiper .z-f5-i1 {
height: 100%;
position: absolute;
top: 0; }
.image-swiper .z-f5-d4:nth-child(4n) .z-f5-i1 {
left: 0; }
.image-swiper .z-f5-d4:nth-child(4n-1) .z-f5-i1 {
right: 0;
transform: rotateY(180deg); }
.image-swiper .z-f5-d4:nth-child(4n-2) .z-f5-i1 {
right: 0;
transform: rotateY(180deg); }
.image-swiper .z-f5-d4:nth-child(4n-3) .z-f5-i1 {
left: 0; }
.image-swiper .z-f5-i2 {
position: absolute;
transition: 0.5s; }
.image-swiper .z-f5-d4:hover .z-f5-i2 {
transform: rotateY(360deg);
transition: 0.5s; }
.image-swiper .z-f5-d4:nth-child(1) .z-f5-i2 {
width: 49px;
left: 40px;
top: calc(50% - 32px); }
.image-swiper .z-f5-d4:nth-child(2) .z-f5-i2 {
width: 60px;
left: 52px;
top: calc(50% - 28px); }
.image-swiper .z-f5-d4:nth-child(3) .z-f5-i2 {
width: 62px;
left: 34px;
top: calc(50% - 29px); }
.image-swiper .z-f5-d4:nth-child(4) .z-f5-i2 {
width: 55px;
left: 60px;
top: calc(50% - 30px); }
.image-swiper .z-f5-d4:nth-child(5) .z-f5-i2 {
width: 60px;
left: 38px;
top: calc(50% - 25px); }
.image-swiper .z-f5-d4:nth-child(6) .z-f5-i2 {
width: 64px;
left: 44px;
top: calc(50% - 31px); }
.image-swiper .z-f5-d4:nth-child(7) .z-f5-i2 {
width: 54px;
left: 38px;
top: calc(50% - 26px); }
.image-swiper .z-f5-d4:nth-child(8) .z-f5-i2 {
width: 55px;
left: 44px;
top: calc(50% - 28px); }
.image-swiper .z-f5-p3 {
font-size: 18px;
line-height: 36px;
color: #fff;
text-align: left;
width: 530px;
height: 72px;
position: absolute;
top: calc(50% - 18px);
left: 122px; }
.image-swiper .z-f5-d4:nth-child(1) .z-f5-p3 {
top: calc(50% - 36px); }
.image-swiper .z-f5-d4:nth-child(2) .z-f5-p3 {
top: calc(50% - 36px); }
.image-swiper .z-f6-d1 {
width: 100%;
height: 210px;
position: relative; }
.image-swiper .z-f6-p1 {
width: 100%;
position: absolute;
top: 78px;
left: 0;
font-size: 42px;
line-height: 42px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f6-p2 {
width: 100%;
position: absolute;
top: 144px;
left: 0;
font-size: 18px;
line-height: 18px;
color: #666666;
text-align: center; }
.image-swiper .z-f6-d2 {
width: 100%;
height: 640px;
position: relative;
overflow: hidden; }
.image-swiper .z-f6-d3 {
width: 1100px;
height: 540px;
position: absolute;
top: 0;
left: calc(50% - 960px); }
.image-swiper .z-f6-d3 > img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f6-d4 {
width: 1123px;
height: 568px;
position: absolute;
bottom: 0;
right: calc(50% - 960px); }
.image-swiper .z-f6-d4 > img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f6-p3 {
font-size: 24px;
line-height: 24px;
color: #fff;
position: absolute;
top: 76px;
left: 256px; }
.image-swiper .z-f6-d5 {
width: 825px;
position: absolute;
top: 164px;
left: 256px; }
.image-swiper .z-f6-d6 {
width: 380px;
position: absolute;
top: 116px;
left: 390px; }
.image-swiper .z-f6-d7 {
position: absolute;
top: 382px;
left: 250px; }
.image-swiper .z-f6-d7 img {
float: left;
transition: 0.5s; }
.image-swiper .z-f6-d7 img:hover {
transform: translateY(-10px);
transition: 0.5s; }
.image-swiper .z-f11-d5 {
width: 100%;
height: 210px;
position: relative; }
.image-swiper .z-f11-p1 {
width: 100%;
position: absolute;
top: 80px;
left: 0;
font-size: 42px;
line-height: 42px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f11-p0 {
width: 100%;
position: absolute;
top: 146px;
left: 0;
font-size: 18px;
line-height: 18px;
color: #666666;
text-align: center; }
.image-swiper .z-f11-d1 {
width: 100%;
height: 694px;
position: relative;
overflow: hidden;
background: #2b214f; }
.image-swiper .z-f11-d2 {
width: 1440px;
height: 100%;
position: absolute;
top: 0;
left: calc(50% - 720px);
z-index: 10; }
.image-swiper .z-f11-d3 {
width: 20%;
height: 100%;
float: left;
position: relative; }
.image-swiper .z-f11-i1 {
width: 138px;
position: absolute;
top: 240px;
left: calc(50% - 69px); }
.image-swiper .z-f11-p2 {
width: 100%;
height: 36px;
font-size: 20px;
line-height: 20px;
color: #fff;
text-align: center;
position: absolute;
top: 438px;
left: 0; }
.image-swiper .z-f11-d4 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
transform: rotateY(90deg);
overflow: hidden; }
.image-swiper .z-f11-d3:hover .z-f11-d4 {
transform: rotateY(0);
transition: 0.5s; }
.image-swiper .z-f11-d3:nth-child(1) .z-f11-d4 {
background: -webkit-linear-gradient(#f88774, #ec3175);
background: -o-linear-gradient(#f88774, #ec3175);
background: -moz-linear-gradient(#f88774, #ec3175);
background: linear-gradient(#f88774, #ec3175); }
.image-swiper .z-f11-d3:nth-child(2) .z-f11-d4 {
background: -webkit-linear-gradient(#fdd287, #e4984b);
background: -o-linear-gradient(#fdd287, #e4984b);
background: -moz-linear-gradient(#fdd287, #e4984b);
background: linear-gradient(#fdd287, #e4984b); }
.image-swiper .z-f11-d3:nth-child(3) .z-f11-d4 {
background: -webkit-linear-gradient(#bc62ce, #6647b0);
background: -o-linear-gradient(#bc62ce, #6647b0);
background: -moz-linear-gradient(#bc62ce, #6647b0);
background: linear-gradient(#bc62ce, #6647b0); }
.image-swiper .z-f11-d3:nth-child(4) .z-f11-d4 {
background: -webkit-linear-gradient(#31e69c, #03a990);
background: -o-linear-gradient(#31e69c, #03a990);
background: -moz-linear-gradient(#31e69c, #03a990);
background: linear-gradient(#31e69c, #03a990); }
.image-swiper .z-f11-d3:nth-child(5) .z-f11-d4 {
background: -webkit-linear-gradient(#3faffc, #256ce7);
background: -o-linear-gradient(#3faffc, #256ce7);
background: -moz-linear-gradient(#3faffc, #256ce7);
background: linear-gradient(#3faffc, #256ce7); }
.image-swiper .z-f11-p3 {
width: 100%;
height: 36px;
font-size: 30px;
line-height: 36px;
color: #FFFFFF;
text-align: center;
position: absolute;
top: 220px;
left: 0; }
.image-swiper .z-f11-p4 {
width: 100%;
position: absolute;
top: 300px;
left: 0; }
.image-swiper .z-f11-p4 img {
display: none; }
.image-swiper .z-f11-p4 span {
font-size: 18px;
line-height: calc(48px);
color: #FFFFFF;
text-align: center;
width: 100%;
display: block;
color: #FFFFFF; }
.image-swiper .z-f11-bt1 {
width: 160px;
height: 50px;
border: 0;
border-radius: 25px;
background: #FFFFFF;
overflow: hidden;
font-size: 18px;
line-height: 50px;
text-align: center;
cursor: pointer;
position: absolute;
top: 580px;
left: calc(50% - 80px); }
.image-swiper .z-f11-d3:nth-child(1) .z-f11-bt1 {
color: #e9568b; }
.image-swiper .z-f11-d3:nth-child(2) .z-f11-bt1 {
color: #ecab5f; }
.image-swiper .z-f11-d3:nth-child(3) .z-f11-bt1 {
color: #8350ba; }
.image-swiper .z-f11-d3:nth-child(4) .z-f11-bt1 {
color: #15c295; }
.image-swiper .z-f11-d3:nth-child(5) .z-f11-bt1 {
color: #2c85ef; }
.image-swiper .z-f11-t1 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f11-t2 {
position: absolute; }
.image-swiper .z-f11-t2:nth-child(1) {
width: 140px;
opacity: 0.2;
top: 16%;
left: -20vw;
animation: triangle 32s 4s linear infinite; }
.image-swiper .z-f11-t2:nth-child(2) {
width: 100px;
opacity: 0.4;
top: 22%;
left: -20vw;
animation: triangle 28s 1s linear infinite; }
.image-swiper .z-f11-t2:nth-child(3) {
width: 70px;
opacity: 0.6;
top: 32%;
left: -20vw;
animation: triangle 24s 3s linear infinite; }
.image-swiper .z-f11-t2:nth-child(4) {
width: 50px;
opacity: 0.8;
top: 36%;
left: -20vw;
animation: triangle 20s 2s linear infinite; }
.image-swiper .z-f11-t2:nth-child(5) {
width: 140px;
opacity: 0.2;
top: 50%;
left: -20vw;
animation: triangle 34s 1s linear infinite; }
.image-swiper .z-f11-t2:nth-child(6) {
width: 100px;
opacity: 0.4;
top: 62%;
left: -20vw;
animation: triangle 30s 3s linear infinite; }
.image-swiper .z-f11-t2:nth-child(7) {
width: 70px;
opacity: 0.6;
top: 74%;
left: -20vw;
animation: triangle 26s 2s linear infinite; }
.image-swiper .z-f11-t2:nth-child(8) {
width: 50px;
opacity: 0.8;
top: 46%;
left: -20vw;
animation: triangle 22s 4s linear infinite; }
@keyframes triangle {
0% {
transform: translateX(0) translateY(0); }
25% {
transform: translateX(35vw) translateY(20vh); }
75% {
transform: translateX(105vw) translateY(-20vh); }
100% {
transform: translateX(140vw) translateY(0); } } }
@media only screen and (max-width: 1439px) and (min-width: 1279px) {
.image-swiper .z-f1-d1 {
width: 100%;
height: 740px;
position: relative;
overflow: hidden; }
.image-swiper .swiper1 {
width: 1600px !important;
height: 100%;
position: absolute;
top: 0;
left: calc(50% - 800px); }
.image-swiper .swiper1 .swiper-slide {
width: 100% !important;
position: relative; }
.image-swiper .swiper1 .swiper-slide > img {
width: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f1-d1 > img {
width: 1920px;
position: absolute;
top: 0;
left: calc(50% - 960px);
opacity: 0.15; }
.image-swiper .z-f1-p1 {
height: 120px;
font-size: 120px;
line-height: 120px;
color: #FFFFFF;
font-family: "tcm";
position: absolute;
top: 220px;
left: calc(50% - 580px); }
.image-swiper .z-f1-p2 {
height: 40px;
font-size: 40px;
line-height: 40px;
color: #FFFFFF;
font-weight: lighter;
position: absolute;
top: 370px;
left: calc(50% - 580px); }
.image-swiper .z-f1-p3 {
height: 24px;
font-size: 24px;
line-height: 24px;
color: #FFFFFF;
font-weight: lighter;
position: absolute;
top: 440px;
left: calc(50% - 580px); }
.image-swiper .z-f1-i1 {
width: 680px;
position: absolute;
top: 160px;
right: calc(50% - 580px); }
.image-swiper .z-f10-d1 {
width: 100%;
height: 210px;
position: relative; }
.image-swiper .z-f10-p1 {
width: 100%;
position: absolute;
top: 78px;
left: 0;
font-size: 42px;
line-height: 42px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f10-p2 {
width: 100%;
position: absolute;
top: 142px;
left: 0;
font-size: 18px;
line-height: 18px;
color: #666666;
text-align: center; }
.image-swiper .z-f10-d2 {
width: 100%;
height: 660px;
position: relative;
background: #f3f3f3;
overflow: hidden; }
.image-swiper .z-f10-d3 {
width: 1180px;
position: absolute;
top: 50px;
left: calc(50% - 590px); }
.image-swiper .z-f10-d4 {
width: 380px;
height: 264px;
position: relative;
float: left;
margin-right: 20px;
margin-bottom: 20px;
border: 0;
border-radius: 6px;
background: #fff;
overflow: hidden; }
.image-swiper .z-f10-d4:nth-child(3n) {
margin-right: 0; }
.image-swiper .z-f10-i1 {
width: 100%;
height: 123px;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f10-i1 img {
height: 100%; }
.image-swiper .z-f10-i2 {
width: 92px;
height: 92px;
position: absolute;
top: 16px;
left: 72px;
border: 0;
border-radius: 50%;
transition: 0.5s; }
.image-swiper .z-f10-d4:hover .z-f10-i2 {
transform: rotateY(360deg);
transition: 0.5s; }
.image-swiper .z-f10-p3 {
font-size: 20px;
line-height: 22px;
color: #fff;
position: absolute;
top: 44px;
left: 200px; }
.image-swiper .z-f10-p3 span {
font-family: "din";
font-size: 36px;
line-height: 22px;
color: #fff;
position: relative;
top: 4px; }
.image-swiper .z-f10-p4 {
width: 360px;
font-size: 14px;
line-height: 24px;
color: #434343;
position: absolute;
top: 150px;
left: calc((100% - 360px) / 2); }
.image-swiper .z-f2-d1 {
width: 100%;
height: 210px;
position: relative; }
.image-swiper .z-f2-p1 {
width: 100%;
position: absolute;
top: 78px;
left: 0;
font-size: 42px;
line-height: 42px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f2-p2 {
width: 100%;
position: absolute;
top: 142px;
left: 0;
font-size: 18px;
line-height: 18px;
color: #666666;
text-align: center; }
.image-swiper .z-f2-d2 {
width: 100%;
height: 626px;
position: relative;
background: #f3f3f3;
overflow: hidden; }
.image-swiper .z-f2-d2 > img {
width: 1600px;
position: absolute;
top: 0;
left: calc(50% - 800px); }
.image-swiper .z-f2-d3 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f2-i1 {
position: absolute; }
.image-swiper .z-f2-i1:nth-child(1) {
width: 180px;
top: 70px;
left: calc(50% - 90px); }
.image-swiper .z-f2-i1:nth-child(2) {
width: 180px;
top: 150px;
left: calc(50% - 110px); }
.image-swiper .z-f2-i1:nth-child(3) {
width: 180px;
top: 260px;
left: calc(50% - 110px); }
.image-swiper .z-f2-i1:nth-child(4) {
width: 320px;
top: 360px;
left: calc(50% - 150px); }
.image-swiper .z-f2-d4 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f2-d5 {
position: absolute;
width: 400px; }
.image-swiper .z-f2-d5:nth-child(1) {
top: 80px;
left: calc(50% - 580px); }
.image-swiper .z-f2-d5:nth-child(2) {
top: 80px;
right: calc(50% - 580px); }
.image-swiper .z-f2-d5:nth-child(3) {
top: 360px;
left: calc(50% - 580px); }
.image-swiper .z-f2-d5:nth-child(4) {
top: 360px;
right: calc(50% - 580px); }
.image-swiper .z-f2-p3 {
padding: 0 24px;
height: 50px;
border: 0;
border-radius: 4px;
background: #36b9c8;
margin-bottom: 24px;
font-size: 22px;
line-height: 50px;
color: #fff;
width: auto !important; }
.image-swiper .z-f2-p3 span {
font-family: "din";
font-size: 30px;
line-height: 30px;
color: #fff;
position: relative;
top: 4px; }
.image-swiper .z-f2-p4 {
font-size: 14px;
line-height: 24px;
color: #fff;
width: 100%; }
.image-swiper .z-f9-d1 {
width: 100%;
height: 210px;
position: relative; }
.image-swiper .z-f9-p1 {
width: 100%;
position: absolute;
top: 78px;
left: 0;
font-size: 42px;
line-height: 42px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f9-p2 {
width: 100%;
position: absolute;
top: 142px;
left: 0;
font-size: 18px;
line-height: 18px;
color: #666666;
text-align: center; }
.image-swiper .z-f9-d2 {
width: 100%;
height: 648px;
position: relative;
background: #edf3fe;
overflow: hidden; }
.image-swiper .z-f9-d3 {
width: 580px;
position: absolute;
top: 80px;
left: calc(50% - 610px); }
.image-swiper .z-f9-i1 {
float: right;
width: 25%; }
.image-swiper .z-f9-i1:nth-child(1) {
margin-right: 0px; }
.image-swiper .z-f9-i1:nth-child(2) {
padding-top: 170px;
margin-right: -45px; }
.image-swiper .z-f9-i1:nth-child(3) {
padding-top: 60px;
margin-right: 50px; }
.image-swiper .z-f9-i1:nth-child(4) {
padding-top: 50px;
margin-right: -5px; }
.image-swiper .z-f9-i1 img {
width: 140%; }
.image-swiper .z-f9-p3 {
font-size: 30px;
line-height: 30px;
color: #454545;
position: absolute;
top: 72px;
left: calc(50% + 18px); }
.image-swiper .z-f9-d4 {
position: absolute;
left: calc(50% + 18px);
top: 148px; }
.image-swiper .z-f9-d5 {
width: 570px;
height: 80px;
border: 1px solid #c7ced9;
border-radius: 5px;
box-sizing: border-box;
margin-bottom: 22px;
position: relative;
background: #ffffff; }
.image-swiper .z-f9-i2 {
position: absolute; }
.image-swiper .z-f9-d5:nth-child(1) .z-f9-i2 {
top: 10px;
left: 30px; }
.image-swiper .z-f9-d5:nth-child(2) .z-f9-i2 {
top: 12px;
right: 57px; }
.image-swiper .z-f9-d5:nth-child(3) .z-f9-i2 {
top: 16px;
left: 35px; }
.image-swiper .z-f9-d5:nth-child(4) .z-f9-i2 {
top: 12px;
right: 60px; }
.image-swiper .z-f9-p4 {
font-size: 20px;
line-height: 78px;
color: #3e3a39;
position: absolute;
top: 0; }
.image-swiper .z-f9-d5:nth-child(odd) .z-f9-p4 {
left: 112px; }
.image-swiper .z-f9-d5:nth-child(even) .z-f9-p4 {
right: 160px; }
.image-swiper .z-f9-p5 {
font-size: 14px;
line-height: 78px;
color: #3e3a39;
position: absolute;
top: 0; }
.image-swiper .z-f9-d5:nth-child(odd) .z-f9-p5 {
left: 230px; }
.image-swiper .z-f9-d5:nth-child(even) .z-f9-p5 {
right: 280px; }
.image-swiper .z-f7-d1 {
width: 100%;
height: 210px;
position: relative; }
.image-swiper .z-f7-p1 {
width: 100%;
position: absolute;
top: 78px;
left: 0;
font-size: 42px;
line-height: 42px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f7-p2 {
width: 100%;
position: absolute;
top: 142px;
left: 0;
font-size: 18px;
line-height: 18px;
color: #666666;
text-align: center; }
.image-swiper .z-f7-d2 {
width: 100%;
position: relative;
overflow: hidden;
height: 578px; }
.image-swiper .z-f7-d2 > img {
width: 1600px;
position: absolute;
top: 0;
left: calc(50% - 800px); }
.image-swiper .z-f7-p3 {
position: absolute;
top: 80px;
left: calc(50% - 580px);
font-size: 30px;
line-height: 30px;
color: #fff; }
.image-swiper .z-f7-d3 {
position: absolute;
top: 160px;
left: calc(50% - 580px);
width: 720px; }
.image-swiper .z-f7-d4 {
width: 320px;
height: 60px;
position: relative;
margin-bottom: 20px;
float: left; }
.image-swiper .z-f7-i1 {
width: 60px;
height: 60px;
position: absolute;
top: 0;
left: 0;
border: 0;
border-radius: 50%;
transition: 0.5s; }
.image-swiper .z-f7-d4:hover .z-f7-i1 {
transform: rotateY(360deg);
transition: 0.5s; }
.image-swiper .z-f7-p4 {
font-size: 16px;
line-height: 16px;
color: #fff;
position: absolute;
top: 4px;
left: 84px; }
.image-swiper .z-f7-p5 {
font-size: 12px;
line-height: 12px;
color: #fff;
position: absolute;
top: 36px;
left: 84px;
white-space: nowrap; }
.image-swiper .z-f7-i2 {
width: 500px;
position: absolute;
top: 140px;
right: calc(50% - 580px); }
.image-swiper .z-f7-i2 img {
width: 100%; }
.image-swiper .z-f3-d1 {
width: 100%;
height: 420px;
position: relative;
overflow: hidden; }
.image-swiper .z-f3-p1 {
width: 100%;
position: absolute;
top: 80px;
left: 0;
font-size: 42px;
line-height: 42px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f3-p2 {
width: 100%;
position: absolute;
top: 146px;
left: 0;
font-size: 18px;
line-height: 18px;
color: #666666;
text-align: center; }
.image-swiper .z-f3-d2 {
width: 1180px;
position: absolute;
top: 220px;
left: calc(50% - 590px); }
.image-swiper .z-f3-d3 {
width: 196px;
float: left; }
.image-swiper .z-f3-i1 {
width: 106px;
height: 106px;
border: 0;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
position: relative;
transition: 0.5s;
margin-bottom: 28px; }
.image-swiper .z-f3-d3:hover .z-f3-i1 {
transform: rotateY(360deg);
transition: 0.5s; }
.image-swiper .z-f3-i1 img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f3-p3 {
width: 100%;
font-size: 16px;
line-height: 16px;
color: #3f3e41;
text-align: center;
margin-bottom: 18px; }
.image-swiper .z-f3-p4 {
width: 100%;
font-size: 14px;
line-height: 14px;
color: #7f7f7f;
text-align: center; }
.image-swiper .z-f8-d1 {
width: 100%;
height: 210px;
position: relative; }
.image-swiper .z-f8-p1 {
width: 100%;
position: absolute;
top: 78px;
left: 0;
font-size: 42px;
line-height: 42px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f8-p2 {
width: 100%;
position: absolute;
top: 142px;
left: 0;
font-size: 18px;
line-height: 18px;
color: #666666;
text-align: center; }
.image-swiper .z-f8-d2 {
width: 100%;
height: 688px;
position: relative;
overflow: hidden; }
.image-swiper .z-f8-d2 > img {
position: absolute;
top: 0;
left: calc(50% - 800px);
width: 1600px; }
.image-swiper .z-f8-d3 {
width: 1022px;
margin: 0 auto;
padding-top: 60px;
display: flex;
justify-content: space-between; }
.image-swiper .z-f8-d3 > div {
width: 110px; }
.image-swiper .z-f8-d3 > div:nth-child(1) {
width: 130px; }
.image-swiper .z-f8-d3 > div img {
width: 100%; }
.image-swiper .z-f4-d1 {
width: 100%;
height: 210px;
position: relative; }
.image-swiper .z-f4-p1 {
width: 100%;
position: absolute;
top: 78px;
left: 0;
font-size: 42px;
line-height: 42px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f4-p2 {
width: 100%;
position: absolute;
top: 144px;
left: 0;
font-size: 18px;
line-height: 18px;
color: #666666;
text-align: center; }
.image-swiper .z-f4-d2 {
width: 100%;
height: 400px;
position: relative;
overflow: hidden;
background: #f8f8f8; }
.image-swiper .z-f4-d4 {
width: 1180px;
position: absolute;
top: 60px;
left: calc(50% - 590px); }
.image-swiper .z-f4-d3 {
width: 580px;
height: 110px;
position: relative;
border: 0;
border-radius: 10px;
background: #fff;
margin-bottom: 50px;
overflow: hidden;
box-shadow: 0 0 20px rgba(44, 88, 167, 0.1); }
.image-swiper .z-f4-d3:nth-child(odd) {
float: left; }
.image-swiper .z-f4-d3:nth-child(even) {
float: right; }
.image-swiper .z-f4-i1 {
position: absolute;
transition: 0.5s; }
.image-swiper .z-f4-d3:hover .z-f4-i1 {
transform: rotateY(360deg);
transition: 0.5s; }
.image-swiper .z-f4-d3:nth-child(1) .z-f4-i1 {
width: 60px;
top: calc(50% - 27px);
left: 134px; }
.image-swiper .z-f4-d3:nth-child(2) .z-f4-i1 {
width: 54px;
top: calc(50% - 25px);
left: 106px; }
.image-swiper .z-f4-d3:nth-child(3) .z-f4-i1 {
width: 58px;
top: calc(50% - 28px);
left: 138px; }
.image-swiper .z-f4-d3:nth-child(4) .z-f4-i1 {
width: 50px;
top: calc(50% - 25px);
left: 108px; }
.image-swiper .z-f4-p3 {
font-size: 20px;
line-height: 110px;
color: #4c4948;
position: absolute;
top: 0; }
.image-swiper .z-f4-d3:nth-child(1) .z-f4-p3 {
left: 254px; }
.image-swiper .z-f4-d3:nth-child(2) .z-f4-p3 {
left: 228px; }
.image-swiper .z-f4-d3:nth-child(3) .z-f4-p3 {
left: 254px; }
.image-swiper .z-f4-d3:nth-child(4) .z-f4-p3 {
left: 228px; }
.image-swiper .z-f5-d1 {
width: 100%;
height: 210px;
position: relative; }
.image-swiper .z-f5-p1 {
width: 100%;
position: absolute;
top: 78px;
left: 0;
font-size: 42px;
line-height: 42px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f5-p2 {
width: 100%;
position: absolute;
top: 144px;
left: 0;
font-size: 18px;
line-height: 18px;
color: #666666;
text-align: center; }
.image-swiper .z-f5-d2 {
width: 100%;
height: 752px;
position: relative;
overflow: hidden; }
.image-swiper .z-f5-d2 > img {
width: 1600px;
position: absolute;
top: 0;
left: calc(50% - 800px); }
.image-swiper .z-f5-d3 {
width: 1180px;
position: absolute;
top: 60px;
left: calc(50% - 590px); }
.image-swiper .z-f5-d4 {
width: 580px;
height: 110px;
position: relative;
margin-bottom: 58px; }
.image-swiper .z-f5-d4:nth-child(odd) {
float: left; }
.image-swiper .z-f5-d4:nth-child(even) {
float: right; }
.image-swiper .z-f5-i1 {
height: 100%;
position: absolute;
top: 0; }
.image-swiper .z-f5-d4:nth-child(4n) .z-f5-i1 {
left: 0; }
.image-swiper .z-f5-d4:nth-child(4n-1) .z-f5-i1 {
right: 0;
transform: rotateY(180deg); }
.image-swiper .z-f5-d4:nth-child(4n-2) .z-f5-i1 {
right: 0;
transform: rotateY(180deg); }
.image-swiper .z-f5-d4:nth-child(4n-3) .z-f5-i1 {
left: 0; }
.image-swiper .z-f5-i2 {
position: absolute;
transition: 0.5s; }
.image-swiper .z-f5-d4:hover .z-f5-i2 {
transform: rotateY(360deg);
transition: 0.5s; }
.image-swiper .z-f5-d4:nth-child(1) .z-f5-i2 {
width: 49px;
left: 40px;
top: calc(50% - 24px); }
.image-swiper .z-f5-d4:nth-child(2) .z-f5-i2 {
width: 60px;
left: 52px;
top: calc(50% - 20px); }
.image-swiper .z-f5-d4:nth-child(3) .z-f5-i2 {
width: 62px;
left: 34px;
top: calc(50% - 21px); }
.image-swiper .z-f5-d4:nth-child(4) .z-f5-i2 {
width: 55px;
left: 60px;
top: calc(50% - 22px); }
.image-swiper .z-f5-d4:nth-child(5) .z-f5-i2 {
width: 60px;
left: 38px;
top: calc(50% - 17px); }
.image-swiper .z-f5-d4:nth-child(6) .z-f5-i2 {
width: 64px;
left: 44px;
top: calc(50% - 23px); }
.image-swiper .z-f5-d4:nth-child(7) .z-f5-i2 {
width: 54px;
left: 38px;
top: calc(50% - 18px); }
.image-swiper .z-f5-d4:nth-child(8) .z-f5-i2 {
width: 55px;
left: 44px;
top: calc(50% - 20px); }
.image-swiper .z-f5-p3 {
font-size: 16px;
line-height: 32px;
color: #fff;
text-align: left;
width: 380px;
height: 64px;
position: absolute;
top: calc(50% - 8px);
left: 126px; }
.image-swiper .z-f5-d4:nth-child(1) .z-f5-p3 {
top: calc(50% - 16px); }
.image-swiper .z-f5-d4:nth-child(2) .z-f5-p3 {
top: calc(50% - 16px); }
.image-swiper .z-f5-d4:nth-child(5) .z-f5-p3 {
top: calc(50% - 16px); }
.image-swiper .z-f6-d1 {
width: 100%;
height: 210px;
position: relative; }
.image-swiper .z-f6-p1 {
width: 100%;
position: absolute;
top: 78px;
left: 0;
font-size: 42px;
line-height: 42px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f6-p2 {
width: 100%;
position: absolute;
top: 144px;
left: 0;
font-size: 18px;
line-height: 18px;
color: #666666;
text-align: center; }
.image-swiper .z-f6-d2 {
width: 100%;
height: 640px;
position: relative;
overflow: hidden; }
.image-swiper .z-f6-d3 {
width: 950px;
height: 540px;
position: absolute;
top: 0;
left: calc(50% - 880px); }
.image-swiper .z-f6-d3 > img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f6-d4 {
width: 950px;
height: 568px;
position: absolute;
bottom: 0;
right: calc(50% - 880px); }
.image-swiper .z-f6-d4 > img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f6-p3 {
font-size: 20px;
line-height: 20px;
color: #fff;
position: absolute;
top: 76px;
left: 312px; }
.image-swiper .z-f6-d5 {
width: 620px;
position: absolute;
top: 164px;
left: 300px; }
.image-swiper .z-f6-d6 {
width: 340px;
position: absolute;
top: 116px;
left: 250px; }
.image-swiper .z-f6-d7 {
position: absolute;
top: 382px;
left: 90px; }
.image-swiper .z-f6-d7 img {
float: left;
transition: 0.5s;
margin-right: -20px; }
.image-swiper .z-f6-d7 img:hover {
transform: translateY(-10px);
transition: 0.5s; }
.image-swiper .z-f11-d5 {
width: 100%;
height: 210px;
position: relative; }
.image-swiper .z-f11-p1 {
width: 100%;
position: absolute;
top: 80px;
left: 0;
font-size: 42px;
line-height: 42px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f11-p0 {
width: 100%;
position: absolute;
top: 146px;
left: 0;
font-size: 18px;
line-height: 18px;
color: #666666;
text-align: center; }
.image-swiper .z-f11-d1 {
width: 100%;
height: 694px;
position: relative;
overflow: hidden;
background: #2b214f; }
.image-swiper .z-f11-d2 {
width: 1180px;
height: 100%;
position: absolute;
top: 0;
left: calc(50% - 590px);
z-index: 10; }
.image-swiper .z-f11-d3 {
width: 20%;
height: 100%;
float: left;
position: relative; }
.image-swiper .z-f11-i1 {
width: 138px;
position: absolute;
top: 240px;
left: calc(50% - 69px); }
.image-swiper .z-f11-p2 {
width: 100%;
height: 36px;
font-size: 20px;
line-height: 20px;
color: #fff;
text-align: center;
position: absolute;
top: 438px;
left: 0; }
.image-swiper .z-f11-d4 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
transform: rotateY(90deg);
overflow: hidden; }
.image-swiper .z-f11-d3:hover .z-f11-d4 {
transform: rotateY(0);
transition: 0.5s; }
.image-swiper .z-f11-d3:nth-child(1) .z-f11-d4 {
background: -webkit-linear-gradient(#f88774, #ec3175);
background: -o-linear-gradient(#f88774, #ec3175);
background: -moz-linear-gradient(#f88774, #ec3175);
background: linear-gradient(#f88774, #ec3175); }
.image-swiper .z-f11-d3:nth-child(2) .z-f11-d4 {
background: -webkit-linear-gradient(#fdd287, #e4984b);
background: -o-linear-gradient(#fdd287, #e4984b);
background: -moz-linear-gradient(#fdd287, #e4984b);
background: linear-gradient(#fdd287, #e4984b); }
.image-swiper .z-f11-d3:nth-child(3) .z-f11-d4 {
background: -webkit-linear-gradient(#bc62ce, #6647b0);
background: -o-linear-gradient(#bc62ce, #6647b0);
background: -moz-linear-gradient(#bc62ce, #6647b0);
background: linear-gradient(#bc62ce, #6647b0); }
.image-swiper .z-f11-d3:nth-child(4) .z-f11-d4 {
background: -webkit-linear-gradient(#31e69c, #03a990);
background: -o-linear-gradient(#31e69c, #03a990);
background: -moz-linear-gradient(#31e69c, #03a990);
background: linear-gradient(#31e69c, #03a990); }
.image-swiper .z-f11-d3:nth-child(5) .z-f11-d4 {
background: -webkit-linear-gradient(#3faffc, #256ce7);
background: -o-linear-gradient(#3faffc, #256ce7);
background: -moz-linear-gradient(#3faffc, #256ce7);
background: linear-gradient(#3faffc, #256ce7); }
.image-swiper .z-f11-p3 {
width: 100%;
height: 36px;
font-size: 30px;
line-height: 36px;
color: #FFFFFF;
text-align: center;
position: absolute;
top: 220px;
left: 0; }
.image-swiper .z-f11-p4 {
width: 100%;
position: absolute;
top: 300px;
left: 0; }
.image-swiper .z-f11-p4 img {
display: none; }
.image-swiper .z-f11-p4 span {
font-size: 18px;
line-height: calc(48px);
color: #FFFFFF;
text-align: center;
width: 100%;
display: block;
color: #FFFFFF; }
.image-swiper .z-f11-bt1 {
width: 160px;
height: 50px;
border: 0;
border-radius: 25px;
background: #FFFFFF;
overflow: hidden;
font-size: 18px;
line-height: 50px;
text-align: center;
cursor: pointer;
position: absolute;
top: 580px;
left: calc(50% - 80px); }
.image-swiper .z-f11-d3:nth-child(1) .z-f11-bt1 {
color: #e9568b; }
.image-swiper .z-f11-d3:nth-child(2) .z-f11-bt1 {
color: #ecab5f; }
.image-swiper .z-f11-d3:nth-child(3) .z-f11-bt1 {
color: #8350ba; }
.image-swiper .z-f11-d3:nth-child(4) .z-f11-bt1 {
color: #15c295; }
.image-swiper .z-f11-d3:nth-child(5) .z-f11-bt1 {
color: #2c85ef; }
.image-swiper .z-f11-t1 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f11-t2 {
position: absolute; }
.image-swiper .z-f11-t2:nth-child(1) {
width: 140px;
opacity: 0.2;
top: 16%;
left: -20vw;
animation: triangle 32s 4s linear infinite; }
.image-swiper .z-f11-t2:nth-child(2) {
width: 100px;
opacity: 0.4;
top: 22%;
left: -20vw;
animation: triangle 28s 1s linear infinite; }
.image-swiper .z-f11-t2:nth-child(3) {
width: 70px;
opacity: 0.6;
top: 32%;
left: -20vw;
animation: triangle 24s 3s linear infinite; }
.image-swiper .z-f11-t2:nth-child(4) {
width: 50px;
opacity: 0.8;
top: 36%;
left: -20vw;
animation: triangle 20s 2s linear infinite; }
.image-swiper .z-f11-t2:nth-child(5) {
width: 140px;
opacity: 0.2;
top: 50%;
left: -20vw;
animation: triangle 34s 1s linear infinite; }
.image-swiper .z-f11-t2:nth-child(6) {
width: 100px;
opacity: 0.4;
top: 62%;
left: -20vw;
animation: triangle 30s 3s linear infinite; }
.image-swiper .z-f11-t2:nth-child(7) {
width: 70px;
opacity: 0.6;
top: 74%;
left: -20vw;
animation: triangle 26s 2s linear infinite; }
.image-swiper .z-f11-t2:nth-child(8) {
width: 50px;
opacity: 0.8;
top: 46%;
left: -20vw;
animation: triangle 22s 4s linear infinite; }
@keyframes triangle {
0% {
transform: translateX(0) translateY(0); }
25% {
transform: translateX(35vw) translateY(20vh); }
75% {
transform: translateX(105vw) translateY(-20vh); }
100% {
transform: translateX(140vw) translateY(0); } } }
@media only screen and (max-width: 1269px) and (min-width: 1024px) {
.image-swiper .z-f1-d1 {
width: 100%;
height: 590px;
position: relative;
overflow: hidden; }
.image-swiper .swiper1 {
width: 1280px !important;
height: 100%;
position: absolute;
top: 0;
left: calc(50% - 640px); }
.image-swiper .swiper1 .swiper-slide {
width: 100% !important;
position: relative; }
.image-swiper .swiper1 .swiper-slide > img {
width: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f1-p1 {
height: 100px;
font-size: 100px;
line-height: 100px;
color: #FFFFFF;
font-family: "tcm";
position: absolute;
top: 180px;
left: calc(50% - 450px); }
.image-swiper .z-f1-p2 {
height: 36px;
font-size: 36px;
line-height: 36px;
color: #FFFFFF;
font-weight: lighter;
position: absolute;
top: 340px;
left: calc(50% - 450px); }
.image-swiper .z-f1-p3 {
height: 20px;
font-size: 20px;
line-height: 20px;
color: #FFFFFF;
font-weight: lighter;
position: absolute;
top: 400px;
left: calc(50% - 450px); }
.image-swiper .z-f1-i1 {
width: 500px;
position: absolute;
top: 160px;
right: calc(50% - 450px); }
.image-swiper .z-f10-d1 {
width: 100%;
height: 160px;
position: relative; }
.image-swiper .z-f10-p1 {
width: 100%;
position: absolute;
top: 44px;
left: 0;
font-size: 36px;
line-height: 36px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f10-p2 {
width: 100%;
position: absolute;
top: 100px;
left: 0;
font-size: 16px;
line-height: 16px;
color: #666666;
text-align: center; }
.image-swiper .z-f10-d2 {
width: 100%;
height: 500px;
position: relative;
background: #f3f3f3;
overflow: hidden; }
.image-swiper .z-f10-d3 {
width: 900px;
position: absolute;
top: 50px;
left: calc(50% - 450px); }
.image-swiper .z-f10-d4 {
width: 290px;
height: 190px;
position: relative;
float: left;
margin-right: 15px;
margin-bottom: 15px;
border: 0;
border-radius: 6px;
background: #fff;
overflow: hidden; }
.image-swiper .z-f10-d4:nth-child(3n) {
margin-right: 0; }
.image-swiper .z-f10-i1 {
width: 100%;
height: 80px;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f10-i1 img {
height: 100%; }
.image-swiper .z-f10-i2 {
width: 60px;
height: 60px;
position: absolute;
top: 10px;
left: 50px;
border: 0;
border-radius: 50%;
transition: 0.5s; }
.image-swiper .z-f10-d4:hover .z-f10-i2 {
transform: rotateY(360deg);
transition: 0.5s; }
.image-swiper .z-f10-p3 {
font-size: 16px;
line-height: 18px;
color: #fff;
position: absolute;
top: 28px;
left: 140px; }
.image-swiper .z-f10-p3 span {
font-family: "din";
font-size: 24px;
line-height: 18px;
color: #fff;
position: relative;
top: 2px; }
.image-swiper .z-f10-p4 {
width: 270px;
font-size: 12px;
line-height: 22px;
color: #434343;
position: absolute;
top: 90px;
left: calc((100% - 270px) / 2); }
.image-swiper .z-f2-d1 {
width: 100%;
height: 160px;
position: relative; }
.image-swiper .z-f2-p1 {
width: 100%;
position: absolute;
top: 44px;
left: 0;
font-size: 36px;
line-height: 36px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f2-p2 {
width: 100%;
position: absolute;
top: 100px;
left: 0;
font-size: 16px;
line-height: 16px;
color: #666666;
text-align: center; }
.image-swiper .z-f2-d2 {
width: 100%;
height: 500px;
position: relative;
background: #f3f3f3;
overflow: hidden; }
.image-swiper .z-f2-d2 > img {
width: 1280px;
position: absolute;
top: 0;
left: calc(50% - 640px); }
.image-swiper .z-f2-d3 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f2-i1 {
position: absolute; }
.image-swiper .z-f2-i1:nth-child(1) {
width: 120px;
top: 60px;
left: calc(50% - 60px); }
.image-swiper .z-f2-i1:nth-child(2) {
width: 120px;
top: 140px;
left: calc(50% - 80px); }
.image-swiper .z-f2-i1:nth-child(3) {
width: 120px;
top: 250px;
left: calc(50% - 80px); }
.image-swiper .z-f2-i1:nth-child(4) {
width: 200px;
top: 280px;
left: calc(50% - 100px); }
.image-swiper .z-f2-d4 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f2-d5 {
position: absolute;
width: 340px; }
.image-swiper .z-f2-d5:nth-child(1) {
top: 50px;
left: calc(50% - 450px); }
.image-swiper .z-f2-d5:nth-child(2) {
top: 50px;
right: calc(50% - 450px); }
.image-swiper .z-f2-d5:nth-child(3) {
top: 260px;
left: calc(50% - 450px); }
.image-swiper .z-f2-d5:nth-child(4) {
top: 260px;
right: calc(50% - 450px); }
.image-swiper .z-f2-p3 {
padding: 0 20px;
height: 40px;
border: 0;
border-radius: 4px;
background: #36b9c8;
margin-bottom: 20px;
font-size: 18px;
line-height: 40px;
color: #fff;
width: auto !important; }
.image-swiper .z-f2-p3 span {
font-family: "din";
font-size: 24px;
line-height: 24px;
color: #fff;
position: relative;
top: 2px; }
.image-swiper .z-f2-p4 {
font-size: 12px;
line-height: 22px;
color: #fff;
width: 100%; }
.image-swiper .z-f9-d1 {
width: 100%;
height: 160px;
position: relative; }
.image-swiper .z-f9-p1 {
width: 100%;
position: absolute;
top: 44px;
left: 0;
font-size: 36px;
line-height: 36px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f9-p2 {
width: 100%;
position: absolute;
top: 100px;
left: 0;
font-size: 16px;
line-height: 16px;
color: #666666;
text-align: center; }
.image-swiper .z-f9-d2 {
width: 100%;
height: 560px;
position: relative;
background: #edf3fe;
overflow: hidden; }
.image-swiper .z-f9-d3 {
width: 450px;
position: absolute;
top: 80px;
left: calc(50% - 480px); }
.image-swiper .z-f9-i1 {
float: right;
width: 25%; }
.image-swiper .z-f9-i1:nth-child(1) {
margin-right: 0px; }
.image-swiper .z-f9-i1:nth-child(2) {
padding-top: 170px;
margin-right: -45px; }
.image-swiper .z-f9-i1:nth-child(3) {
padding-top: 60px;
margin-right: 50px; }
.image-swiper .z-f9-i1:nth-child(4) {
padding-top: 50px;
margin-right: -5px; }
.image-swiper .z-f9-i1 img {
width: 140%; }
.image-swiper .z-f9-p3 {
font-size: 24px;
line-height: 24px;
color: #454545;
position: absolute;
top: 80px;
left: calc(50% + 30px); }
.image-swiper .z-f9-d4 {
position: absolute;
left: calc(50% + 30px);
top: 148px; }
.image-swiper .z-f9-d5 {
width: 420px;
height: 60px;
border: 1px solid #c7ced9;
border-radius: 5px;
box-sizing: border-box;
margin-bottom: 22px;
position: relative;
background: #ffffff; }
.image-swiper .z-f9-i2 {
position: absolute;
height: 44px; }
.image-swiper .z-f9-i2 img {
height: 100%; }
.image-swiper .z-f9-d5:nth-child(1) .z-f9-i2 {
top: 7px;
left: 24px; }
.image-swiper .z-f9-d5:nth-child(2) .z-f9-i2 {
top: 7px;
right: 27px; }
.image-swiper .z-f9-d5:nth-child(3) .z-f9-i2 {
top: 7px;
left: 19px; }
.image-swiper .z-f9-d5:nth-child(4) .z-f9-i2 {
top: 7px;
right: 25px; }
.image-swiper .z-f9-p4 {
font-size: 16px;
line-height: 58px;
color: #3e3a39;
position: absolute;
top: 0; }
.image-swiper .z-f9-d5:nth-child(odd) .z-f9-p4 {
left: 80px; }
.image-swiper .z-f9-d5:nth-child(even) .z-f9-p4 {
right: 80px; }
.image-swiper .z-f9-p5 {
font-size: 12px;
line-height: 58px;
color: #3e3a39;
position: absolute;
top: 0; }
.image-swiper .z-f9-d5:nth-child(odd) .z-f9-p5 {
left: 180px; }
.image-swiper .z-f9-d5:nth-child(even) .z-f9-p5 {
right: 180px; }
.image-swiper .z-f7-d1 {
width: 100%;
height: 160px;
position: relative; }
.image-swiper .z-f7-p1 {
width: 100%;
position: absolute;
top: 44px;
left: 0;
font-size: 36px;
line-height: 36px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f7-p2 {
width: 100%;
position: absolute;
top: 100px;
left: 0;
font-size: 16px;
line-height: 16px;
color: #666666;
text-align: center; }
.image-swiper .z-f7-d2 {
width: 100%;
position: relative;
overflow: hidden;
height: 460px; }
.image-swiper .z-f7-d2 > img {
width: 1280px;
position: absolute;
top: 0;
left: calc(50% - 640px); }
.image-swiper .z-f7-p3 {
position: absolute;
top: 60px;
left: calc(50% - 450px);
font-size: 24px;
line-height: 24px;
color: #fff; }
.image-swiper .z-f7-d3 {
position: absolute;
top: 120px;
left: calc(50% - 450px);
width: 520px; }
.image-swiper .z-f7-d4 {
width: 260px;
height: 50px;
position: relative;
margin-bottom: 20px;
float: left; }
.image-swiper .z-f7-i1 {
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
border: 0;
border-radius: 50%;
transition: 0.5s; }
.image-swiper .z-f7-d4:hover .z-f7-i1 {
transform: rotateY(360deg);
transition: 0.5s; }
.image-swiper .z-f7-p4 {
font-size: 14px;
line-height: 14px;
color: #fff;
position: absolute;
top: 4px;
left: 60px; }
.image-swiper .z-f7-p5 {
font-size: 12px;
line-height: 12px;
color: #fff;
position: absolute;
top: 32px;
left: 60px;
white-space: nowrap; }
.image-swiper .z-f7-i2 {
width: 380px;
position: absolute;
top: 110px;
right: calc(50% - 480px); }
.image-swiper .z-f7-i2 img {
width: 100%; }
.image-swiper .z-f3-d1 {
width: 100%;
height: 320px;
position: relative;
overflow: hidden; }
.image-swiper .z-f3-p1 {
width: 100%;
position: absolute;
top: 44px;
left: 0;
font-size: 36px;
line-height: 36px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f3-p2 {
width: 100%;
position: absolute;
top: 100px;
left: 0;
font-size: 16px;
line-height: 16px;
color: #666666;
text-align: center; }
.image-swiper .z-f3-d2 {
width: 900px;
position: absolute;
top: 154px;
left: calc(50% - 450px); }
.image-swiper .z-f3-d3 {
width: 150px;
float: left; }
.image-swiper .z-f3-i1 {
width: 90px;
height: 90px;
border: 0;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
position: relative;
transition: 0.5s;
margin-bottom: 20px; }
.image-swiper .z-f3-d3:hover .z-f3-i1 {
transform: rotateY(360deg);
transition: 0.5s; }
.image-swiper .z-f3-i1 img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f3-p3 {
width: 100%;
font-size: 14px;
line-height: 14px;
color: #3f3e41;
text-align: center;
margin-bottom: 18px; }
.image-swiper .z-f3-p4 {
width: 100%;
font-size: 12px;
line-height: 12px;
color: #7f7f7f;
text-align: center; }
.image-swiper .z-f8-d1 {
width: 100%;
height: 160px;
position: relative; }
.image-swiper .z-f8-p1 {
width: 100%;
position: absolute;
top: 44px;
left: 0;
font-size: 36px;
line-height: 36px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f8-p2 {
width: 100%;
position: absolute;
top: 100px;
left: 0;
font-size: 16px;
line-height: 16px;
color: #666666;
text-align: center; }
.image-swiper .z-f8-d2 {
width: 100%;
height: 550px;
position: relative;
overflow: hidden; }
.image-swiper .z-f8-d2 > img {
position: absolute;
top: 0;
left: calc(50% - 640px);
width: 1280px; }
.image-swiper .z-f8-d3 {
width: 900px;
margin: 0 auto;
padding-top: 40px;
display: flex;
justify-content: space-between; }
.image-swiper .z-f8-d3 > div {
width: 90px; }
.image-swiper .z-f8-d3 > div:nth-child(1) {
width: 110px; }
.image-swiper .z-f8-d3 > div img {
width: 100%; }
.image-swiper .z-f4-d1 {
width: 100%;
height: 160px;
position: relative; }
.image-swiper .z-f4-p1 {
width: 100%;
position: absolute;
top: 44px;
left: 0;
font-size: 36px;
line-height: 36px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f4-p2 {
width: 100%;
position: absolute;
top: 100px;
left: 0;
font-size: 16px;
line-height: 16px;
color: #666666;
text-align: center; }
.image-swiper .z-f4-d2 {
width: 100%;
height: 260px;
position: relative;
overflow: hidden;
background: #f8f8f8; }
.image-swiper .z-f4-d4 {
width: 900px;
position: absolute;
top: 40px;
left: calc(50% - 450px); }
.image-swiper .z-f4-d3 {
width: 440px;
height: 80px;
position: relative;
border: 0;
border-radius: 10px;
background: #fff;
margin-bottom: 20px;
overflow: hidden;
box-shadow: 0 0 20px rgba(44, 88, 167, 0.1); }
.image-swiper .z-f4-d3:nth-child(odd) {
float: left; }
.image-swiper .z-f4-d3:nth-child(even) {
float: right; }
.image-swiper .z-f4-i1 {
position: absolute;
transition: 0.5s; }
.image-swiper .z-f4-d3:hover .z-f4-i1 {
transform: rotateY(360deg);
transition: 0.5s; }
.image-swiper .z-f4-d3:nth-child(1) .z-f4-i1 {
width: 50px;
top: calc(50% - 22px);
left: 84px; }
.image-swiper .z-f4-d3:nth-child(2) .z-f4-i1 {
width: 44px;
top: calc(50% - 20px);
left: 56px; }
.image-swiper .z-f4-d3:nth-child(3) .z-f4-i1 {
width: 48px;
top: calc(50% - 23px);
left: 88px; }
.image-swiper .z-f4-d3:nth-child(4) .z-f4-i1 {
width: 40px;
top: calc(50% - 20px);
left: 58px; }
.image-swiper .z-f4-p3 {
font-size: 16px;
line-height: 80px;
color: #4c4948;
position: absolute;
top: 0; }
.image-swiper .z-f4-d3:nth-child(1) .z-f4-p3 {
left: 184px; }
.image-swiper .z-f4-d3:nth-child(2) .z-f4-p3 {
left: 158px; }
.image-swiper .z-f4-d3:nth-child(3) .z-f4-p3 {
left: 184px; }
.image-swiper .z-f4-d3:nth-child(4) .z-f4-p3 {
left: 158px; }
.image-swiper .z-f5-d1 {
width: 100%;
height: 160px;
position: relative; }
.image-swiper .z-f5-p1 {
width: 100%;
position: absolute;
top: 44px;
left: 0;
font-size: 36px;
line-height: 36px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f5-p2 {
width: 100%;
position: absolute;
top: 100px;
left: 0;
font-size: 16px;
line-height: 16px;
color: #666666;
text-align: center; }
.image-swiper .z-f5-d2 {
width: 100%;
height: 600px;
position: relative;
overflow: hidden; }
.image-swiper .z-f5-d2 > img {
width: 1280px;
position: absolute;
top: 0;
left: calc(50% - 640px); }
.image-swiper .z-f5-d3 {
width: 900px;
position: absolute;
top: 48px;
left: calc(50% - 450px); }
.image-swiper .z-f5-d4 {
width: 440px;
height: 110px;
position: relative;
margin-bottom: 20px; }
.image-swiper .z-f5-d4:nth-child(odd) {
float: left; }
.image-swiper .z-f5-d4:nth-child(even) {
float: right; }
.image-swiper .z-f5-i1 {
height: 100%;
position: absolute;
top: 0;
width: 100%; }
.image-swiper .z-f5-i1 img {
width: 100%;
height: 100%; }
.image-swiper .z-f5-d4:nth-child(4n) .z-f5-i1 {
left: 0; }
.image-swiper .z-f5-d4:nth-child(4n-1) .z-f5-i1 {
right: 0;
transform: rotateY(180deg); }
.image-swiper .z-f5-d4:nth-child(4n-2) .z-f5-i1 {
right: 0;
transform: rotateY(180deg); }
.image-swiper .z-f5-d4:nth-child(4n-3) .z-f5-i1 {
left: 0; }
.image-swiper .z-f5-i2 {
position: absolute;
transition: 0.5s; }
.image-swiper .z-f5-d4:hover .z-f5-i2 {
transform: rotateY(360deg);
transition: 0.5s; }
.image-swiper .z-f5-d4:nth-child(1) .z-f5-i2 {
width: 39px;
left: 30px;
top: calc(50% - 26px); }
.image-swiper .z-f5-d4:nth-child(2) .z-f5-i2 {
width: 50px;
left: 42px;
top: calc(50% - 22px); }
.image-swiper .z-f5-d4:nth-child(3) .z-f5-i2 {
width: 52px;
left: 24px;
top: calc(50% - 23px); }
.image-swiper .z-f5-d4:nth-child(4) .z-f5-i2 {
width: 45px;
left: 50px;
top: calc(50% - 24px); }
.image-swiper .z-f5-d4:nth-child(5) .z-f5-i2 {
width: 50px;
left: 28px;
top: calc(50% - 19px); }
.image-swiper .z-f5-d4:nth-child(6) .z-f5-i2 {
width: 54px;
left: 34px;
top: calc(50% - 25px); }
.image-swiper .z-f5-d4:nth-child(7) .z-f5-i2 {
width: 44px;
left: 28px;
top: calc(50% - 20px); }
.image-swiper .z-f5-d4:nth-child(8) .z-f5-i2 {
width: 45px;
left: 34px;
top: calc(50% - 22px); }
.image-swiper .z-f5-p3 {
font-size: 13px;
line-height: 26px;
color: #fff;
text-align: left;
width: 280px;
height: 52px;
position: absolute;
top: calc(50% - 26px);
left: 110px; }
.image-swiper .z-f5-d4:nth-child(7) .z-f5-p3 {
top: calc(50% - 13px); }
.image-swiper .z-f5-d4:nth-child(8) .z-f5-p3 {
top: calc(50% - 13px); }
.image-swiper .z-f6-d1 {
width: 100%;
height: 160px;
position: relative; }
.image-swiper .z-f6-p1 {
width: 100%;
position: absolute;
top: 44px;
left: 0;
font-size: 36px;
line-height: 36px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f6-p2 {
width: 100%;
position: absolute;
top: 100px;
left: 0;
font-size: 16px;
line-height: 16px;
color: #666666;
text-align: center; }
.image-swiper .z-f6-d2 {
width: 100%;
height: 440px;
position: relative;
overflow: hidden; }
.image-swiper .z-f6-d3 {
width: 720px;
height: 380px;
position: absolute;
top: 0;
left: calc(50% - 640px); }
.image-swiper .z-f6-d3 > img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f6-d4 {
width: 720px;
height: 380px;
position: absolute;
bottom: 0;
right: calc(50% - 640px); }
.image-swiper .z-f6-d4 > img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f6-p3 {
font-size: 20px;
line-height: 20px;
color: #fff;
position: absolute;
top: 70px;
left: 180px; }
.image-swiper .z-f6-d5 {
width: 500px;
position: absolute;
top: 150px;
left: 180px; }
.image-swiper .z-f6-d6 {
width: 300px;
position: absolute;
top: 70px;
left: 200px; }
.image-swiper .z-f6-d7 {
position: absolute;
top: 260px;
left: 120px; }
.image-swiper .z-f6-d7 img {
float: left;
transition: 0.5s;
margin-right: -20px;
width: 160px; }
.image-swiper .z-f6-d7 img:hover {
transform: translateY(-10px);
transition: 0.5s; }
.image-swiper .z-f11-d5 {
width: 100%;
height: 160px;
position: relative; }
.image-swiper .z-f11-p1 {
width: 100%;
position: absolute;
top: 44px;
left: 0;
font-size: 36px;
line-height: 36px;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f11-p0 {
width: 100%;
position: absolute;
top: 100px;
left: 0;
font-size: 16px;
line-height: 16px;
color: #666666;
text-align: center; }
.image-swiper .z-f11-d1 {
width: 100%;
height: 560px;
position: relative;
overflow: hidden;
background: #2b214f; }
.image-swiper .z-f11-d2 {
width: 900px;
height: 100%;
position: absolute;
top: 0;
left: calc(50% - 450px);
z-index: 10; }
.image-swiper .z-f11-d3 {
width: 20%;
height: 100%;
float: left;
position: relative; }
.image-swiper .z-f11-i1 {
width: 110px;
position: absolute;
top: 200px;
left: calc(50% - 55px); }
.image-swiper .z-f11-p2 {
width: 100%;
height: 20px;
font-size: 16px;
line-height: 20px;
color: #fff;
text-align: center;
position: absolute;
top: 360px;
left: 0; }
.image-swiper .z-f11-d4 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
transform: rotateY(90deg);
overflow: hidden; }
.image-swiper .z-f11-d3:hover .z-f11-d4 {
transform: rotateY(0);
transition: 0.5s; }
.image-swiper .z-f11-d3:nth-child(1) .z-f11-d4 {
background: -webkit-linear-gradient(#f88774, #ec3175);
background: -o-linear-gradient(#f88774, #ec3175);
background: -moz-linear-gradient(#f88774, #ec3175);
background: linear-gradient(#f88774, #ec3175); }
.image-swiper .z-f11-d3:nth-child(2) .z-f11-d4 {
background: -webkit-linear-gradient(#fdd287, #e4984b);
background: -o-linear-gradient(#fdd287, #e4984b);
background: -moz-linear-gradient(#fdd287, #e4984b);
background: linear-gradient(#fdd287, #e4984b); }
.image-swiper .z-f11-d3:nth-child(3) .z-f11-d4 {
background: -webkit-linear-gradient(#bc62ce, #6647b0);
background: -o-linear-gradient(#bc62ce, #6647b0);
background: -moz-linear-gradient(#bc62ce, #6647b0);
background: linear-gradient(#bc62ce, #6647b0); }
.image-swiper .z-f11-d3:nth-child(4) .z-f11-d4 {
background: -webkit-linear-gradient(#31e69c, #03a990);
background: -o-linear-gradient(#31e69c, #03a990);
background: -moz-linear-gradient(#31e69c, #03a990);
background: linear-gradient(#31e69c, #03a990); }
.image-swiper .z-f11-d3:nth-child(5) .z-f11-d4 {
background: -webkit-linear-gradient(#3faffc, #256ce7);
background: -o-linear-gradient(#3faffc, #256ce7);
background: -moz-linear-gradient(#3faffc, #256ce7);
background: linear-gradient(#3faffc, #256ce7); }
.image-swiper .z-f11-p3 {
width: 100%;
height: 28px;
font-size: 24px;
line-height: 28px;
color: #FFFFFF;
text-align: center;
position: absolute;
top: 100px;
left: 0; }
.image-swiper .z-f11-p4 {
width: 100%;
position: absolute;
top: 180px;
left: 0; }
.image-swiper .z-f11-p4 img {
display: none; }
.image-swiper .z-f11-p4 span {
font-size: 14px;
line-height: 28px;
color: #FFFFFF;
text-align: center;
width: 100%;
display: block;
color: #FFFFFF; }
.image-swiper .z-f11-bt1 {
width: 140px;
height: 40px;
border: 0;
border-radius: 25px;
background: #FFFFFF;
overflow: hidden;
font-size: 14px;
line-height: 40px;
text-align: center;
cursor: pointer;
position: absolute;
top: 400px;
left: calc(50% - 70px); }
.image-swiper .z-f11-d3:nth-child(1) .z-f11-bt1 {
color: #e9568b; }
.image-swiper .z-f11-d3:nth-child(2) .z-f11-bt1 {
color: #ecab5f; }
.image-swiper .z-f11-d3:nth-child(3) .z-f11-bt1 {
color: #8350ba; }
.image-swiper .z-f11-d3:nth-child(4) .z-f11-bt1 {
color: #15c295; }
.image-swiper .z-f11-d3:nth-child(5) .z-f11-bt1 {
color: #2c85ef; }
.image-swiper .z-f11-t1 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f11-t2 {
position: absolute; }
.image-swiper .z-f11-t2:nth-child(1) {
width: 140px;
opacity: 0.2;
top: 16%;
left: -20vw;
animation: triangle 32s 4s linear infinite; }
.image-swiper .z-f11-t2:nth-child(2) {
width: 100px;
opacity: 0.4;
top: 22%;
left: -20vw;
animation: triangle 28s 1s linear infinite; }
.image-swiper .z-f11-t2:nth-child(3) {
width: 70px;
opacity: 0.6;
top: 32%;
left: -20vw;
animation: triangle 24s 3s linear infinite; }
.image-swiper .z-f11-t2:nth-child(4) {
width: 50px;
opacity: 0.8;
top: 36%;
left: -20vw;
animation: triangle 20s 2s linear infinite; }
.image-swiper .z-f11-t2:nth-child(5) {
width: 140px;
opacity: 0.2;
top: 50%;
left: -20vw;
animation: triangle 34s 1s linear infinite; }
.image-swiper .z-f11-t2:nth-child(6) {
width: 100px;
opacity: 0.4;
top: 62%;
left: -20vw;
animation: triangle 30s 3s linear infinite; }
.image-swiper .z-f11-t2:nth-child(7) {
width: 70px;
opacity: 0.6;
top: 74%;
left: -20vw;
animation: triangle 26s 2s linear infinite; }
.image-swiper .z-f11-t2:nth-child(8) {
width: 50px;
opacity: 0.8;
top: 46%;
left: -20vw;
animation: triangle 22s 4s linear infinite; }
@keyframes triangle {
0% {
transform: translateX(0) translateY(0); }
25% {
transform: translateX(35vw) translateY(20vh); }
75% {
transform: translateX(105vw) translateY(-20vh); }
100% {
transform: translateX(140vw) translateY(0); } } }
@media only screen and (max-width: 1023px) {
.image-swiper .z-f1-d1 {
width: 100%;
height: 3.2rem;
position: relative;
overflow: hidden; }
.image-swiper .swiper1 {
width: 100% !important;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .swiper1 .swiper-slide {
width: 100% !important;
position: relative; }
.image-swiper .swiper1 .swiper-slide > img {
width: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f1-p1 {
height: 0.76rem;
font-size: 0.76rem;
line-height: 0.76rem;
color: #FFFFFF;
font-family: "tcm";
position: absolute;
top: 0.64rem;
left: 0.4rem; }
.image-swiper .z-f1-p2 {
height: 0.3rem;
font-size: 0.3rem;
line-height: 0.3rem;
color: #FFFFFF;
font-weight: lighter;
position: absolute;
top: 1.56rem;
left: 0.4rem; }
.image-swiper .z-f1-p3 {
height: 0.18rem;
font-size: 0.18rem;
line-height: 0.18rem;
color: #FFFFFF;
font-weight: lighter;
position: absolute;
top: 2.04rem;
left: 0.4rem; }
.image-swiper .z-f1-i1 {
width: 3.15rem;
position: absolute;
top: 0.48rem;
right: 0.4rem; }
.image-swiper .z-f10-d1 {
width: 100%;
height: 1.96rem;
position: relative; }
.image-swiper .z-f10-p1 {
width: 100%;
position: absolute;
top: 0.58rem;
left: 0;
font-size: 0.42rem;
line-height: 0.42rem;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f10-p2 {
width: 100%;
position: absolute;
top: 1.2rem;
left: 0;
font-size: 0.22rem;
line-height: 0.22rem;
color: #666666;
text-align: center; }
.image-swiper .z-f10-d2 {
width: 100%;
position: relative;
background: #f3f3f3;
padding: 0.24rem;
box-sizing: border-box; }
.image-swiper .z-f10-d3 {
width: 100%;
position: relative; }
.image-swiper .z-f10-d4 {
width: calc(50% - 0.12rem);
position: relative;
margin-bottom: 0.24rem;
border: 0;
border-radius: 0.04rem;
background: #fff;
overflow: hidden; }
.image-swiper .z-f10-d4:nth-child(odd) {
float: left; }
.image-swiper .z-f10-d4:nth-child(even) {
float: right; }
.image-swiper .z-f10-d4:nth-child(1) {
height: 2.64rem; }
.image-swiper .z-f10-d4:nth-child(2) {
height: 2.64rem; }
.image-swiper .z-f10-d4:nth-child(3) {
height: 3.94rem; }
.image-swiper .z-f10-d4:nth-child(4) {
height: 3.94rem; }
.image-swiper .z-f10-d4:nth-child(5) {
height: 3.54rem;
margin-bottom: 0; }
.image-swiper .z-f10-d4:nth-child(6) {
height: 3.54rem;
margin-bottom: 0; }
.image-swiper .z-f10-i1 {
width: 100%;
height: 1.23rem;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f10-i1 img {
height: 100%; }
.image-swiper .z-f10-i2 {
width: 0.92rem;
height: 0.92rem;
position: absolute;
top: 0.15rem;
left: 0.3rem;
border: 0;
border-radius: 50%; }
.image-swiper .z-f10-p3 {
font-size: 0.28rem;
line-height: 0.22rem;
color: #fff;
position: absolute;
top: 0.46rem;
left: 1.54rem; }
.image-swiper .z-f10-p3 span {
font-family: "din";
font-size: 0.36rem;
line-height: 0.22rem;
color: #fff;
position: relative;
top: 0.02rem; }
.image-swiper .z-f10-p4 {
width: calc(100% - 0.4rem);
font-size: 0.22rem;
line-height: 0.32rem;
color: #434343;
position: absolute;
top: 1.5rem;
left: 0.2rem; }
.image-swiper .z-f2-d1 {
width: 100%;
height: 1.96rem;
position: relative; }
.image-swiper .z-f2-p1 {
width: 100%;
position: absolute;
top: 0.58rem;
left: 0;
font-size: 0.42rem;
line-height: 0.42rem;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f2-p2 {
width: 100%;
position: absolute;
top: 1.2rem;
left: 0;
font-size: 0.22rem;
line-height: 0.22rem;
color: #666666;
text-align: center; }
.image-swiper .z-f2-d2 {
width: 100%;
position: relative;
overflow: hidden;
height: 15.6rem; }
.image-swiper .z-f2-d2 > img {
width: 100%;
position: relative;
height: 100%; }
.image-swiper .z-f2-d3 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f2-i1 {
position: absolute; }
.image-swiper .z-f2-i1:nth-child(1) {
width: 1.83rem;
top: 0.51rem;
left: calc(50% - 0.79rem); }
.image-swiper .z-f2-i1:nth-child(2) {
width: 1.82rem;
top: 1.33rem;
left: calc(50% - 1.37rem); }
.image-swiper .z-f2-i1:nth-child(3) {
width: 1.82rem;
top: 2.24rem;
left: calc(50% - 1.8rem); }
.image-swiper .z-f2-i1:nth-child(4) {
width: 3.05rem;
top: 3.12rem;
left: calc(50% - 1.34rem); }
.image-swiper .z-f2-d4 {
width: 100%;
height: 100%;
position: absolute;
top: 5.82rem;
left: 0.24rem;
width: calc(100% - 0.48rem); }
.image-swiper .z-f2-d5 {
position: relative;
width: 100%;
margin-bottom: calc(100vw * (24/750)); }
.image-swiper .z-f2-p3 {
padding: 0 0.24rem;
height: 0.5rem;
border: 0;
border-radius: 0.04rem;
background: #36b9c8;
margin-bottom: 0.24rem;
font-size: 0.22rem;
line-height: 0.5rem;
color: #fff;
width: 2.5rem;
box-sizing: border-box; }
.image-swiper .z-f2-p3 span {
font-family: "din";
font-size: 0.3rem;
line-height: 0.3rem;
color: #fff;
position: relative;
top: 0.04rem; }
.image-swiper .z-f2-p4 {
font-size: 0.22rem;
line-height: 0.32rem;
color: #fff;
width: 100%; }
.image-swiper .z-f9-d1 {
width: 100%;
height: 1.96rem;
position: relative; }
.image-swiper .z-f9-p1 {
width: 100%;
position: absolute;
top: 0.58rem;
left: 0;
font-size: 0.42rem;
line-height: 0.42rem;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f9-p2 {
width: 100%;
position: absolute;
top: 1.2rem;
left: 0;
font-size: 0.22rem;
line-height: 0.22rem;
color: #666666;
text-align: center; }
.image-swiper .z-f9-d2 {
width: 100%;
height: 12rem;
position: relative;
background: #edf3fe;
overflow: hidden; }
.image-swiper .z-f9-d3 {
width: calc(100% - 0.48rem);
position: absolute;
top: 0.7rem;
left: 0.24rem; }
.image-swiper .z-f9-i1 {
float: right;
width: 25%; }
.image-swiper .z-f9-i1 img {
width: 126%; }
.image-swiper .z-f9-i1:nth-child(1) {
margin-right: -0.28rem;
position: relative;
left: -0.5rem; }
.image-swiper .z-f9-i1:nth-child(2) {
padding-top: 1.7rem;
position: relative;
left: -0.1rem; }
.image-swiper .z-f9-i1:nth-child(3) {
padding-top: 0.5rem;
position: relative;
left: -0.6rem; }
.image-swiper .z-f9-i1:nth-child(4) {
padding-top: 0.4rem;
position: relative;
left: -0.5rem; }
.image-swiper .z-f9-p3 {
font-size: 0.36rem;
line-height: 0.36rem;
color: #454545;
position: absolute;
top: 6.56rem;
left: 0.34rem; }
.image-swiper .z-f9-d4 {
position: absolute;
left: 0.33rem;
top: 7.3rem;
width: calc(100% - 0.66rem); }
.image-swiper .z-f9-d5 {
width: 100%;
height: 0.9rem;
border: 1px solid #c7ced9;
border-radius: 0.05rem;
box-sizing: border-box;
margin-bottom: 0.22rem;
position: relative;
background: #ffffff; }
.image-swiper .z-f9-i2 {
position: absolute; }
.image-swiper .z-f9-i2 img {
width: 100%; }
.image-swiper .z-f9-d5:nth-child(1) .z-f9-i2 {
width: 0.5rem;
top: calc(50% - 0.3rem);
left: 0.32rem; }
.image-swiper .z-f9-d5:nth-child(2) .z-f9-i2 {
width: 0.36rem;
top: calc(50% - 0.26rem);
right: 0.46rem; }
.image-swiper .z-f9-d5:nth-child(3) .z-f9-i2 {
width: 0.53rem;
top: calc(50% - 0.25rem);
left: 0.32rem; }
.image-swiper .z-f9-d5:nth-child(4) .z-f9-i2 {
width: 0.38rem;
top: calc(50% - 0.27rem);
right: 0.46rem; }
.image-swiper .z-f9-p4 {
font-size: 0.3rem;
line-height: 0.88rem;
color: #3e3a39;
position: absolute;
top: 0; }
.image-swiper .z-f9-d5:nth-child(odd) .z-f9-p4 {
left: 1.02rem; }
.image-swiper .z-f9-d5:nth-child(even) .z-f9-p4 {
right: 1.12rem; }
.image-swiper .z-f9-p5 {
font-size: 0.22rem;
line-height: 0.88rem;
color: #3e3a39;
position: absolute;
top: 0; }
.image-swiper .z-f9-d5:nth-child(odd) .z-f9-p5 {
left: 2.48rem; }
.image-swiper .z-f9-d5:nth-child(even) .z-f9-p5 {
right: 2.6rem; }
.image-swiper .z-f7-d1 {
width: 100%;
height: 1.96rem;
position: relative; }
.image-swiper .z-f7-p1 {
width: 100%;
position: absolute;
top: 0.58rem;
left: 0;
font-size: 0.42rem;
line-height: 0.42rem;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f7-p2 {
width: 100%;
position: absolute;
top: 1.2rem;
left: 0;
font-size: 0.22rem;
line-height: 0.22rem;
color: #666666;
text-align: center; }
.image-swiper .z-f7-d2 {
width: 100%;
position: relative;
overflow: hidden;
height: 10rem; }
.image-swiper .z-f7-d2 > img {
width: 100%;
position: relative;
height: 100%; }
.image-swiper .z-f7-p3 {
display: none; }
.image-swiper .z-f7-d3 {
position: absolute;
top: 5.04rem;
left: 0.24rem;
width: calc(100% - 0.48rem); }
.image-swiper .z-f7-d4 {
width: 50%;
height: 1.08rem;
position: relative;
float: left; }
.image-swiper .z-f7-i1 {
width: 0.66rem;
height: 0.66rem;
position: absolute;
top: 0;
left: 0;
border: 0;
border-radius: 50%; }
.image-swiper .z-f7-p4 {
font-size: 0.28rem;
line-height: 0.28rem;
color: #fff;
position: absolute;
top: 0;
left: 0.84rem; }
.image-swiper .z-f7-p5 {
font-size: 0.22rem;
line-height: 0.26rem;
color: #fff;
position: absolute;
top: 0.38rem;
left: 0.84rem;
width: 2.6rem; }
.image-swiper .z-f7-i2 {
width: 6.2rem;
position: absolute;
top: 0.44rem;
right: calc(50% - 3.1rem); }
.image-swiper .z-f7-i2 img {
width: 100%; }
.image-swiper .z-f3-d1 {
width: 100%;
height: 6.6rem;
position: relative; }
.image-swiper .z-f3-p1 {
width: 100%;
position: absolute;
top: 0.58rem;
left: 0;
font-size: 0.42rem;
line-height: 0.42rem;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f3-p2 {
width: 100%;
position: absolute;
top: 1.2rem;
left: 0;
font-size: 0.22rem;
line-height: 0.22rem;
color: #666666;
text-align: center; }
.image-swiper .z-f3-d2 {
width: 100%;
position: absolute;
height: 4.6rem;
top: 2rem;
left: 0; }
.image-swiper .z-f3-d3 {
width: 33.33%;
float: left;
height: 2.5rem; }
.image-swiper .z-f3-i1 {
width: 1.06rem;
height: 1.06rem;
border: 0;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
position: relative;
margin-bottom: 0.24rem; }
.image-swiper .z-f3-i1 img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f3-p3 {
width: 100%;
font-size: 0.28rem;
line-height: 0.28rem;
color: #3f3e41;
text-align: center;
margin-bottom: 0.12rem; }
.image-swiper .z-f3-p4 {
width: 90%;
font-size: 0.22rem;
line-height: 0.3rem;
color: #7f7f7f;
text-align: center;
margin: 0 auto; }
.image-swiper .z-f8-d1 {
width: 100%;
height: 1.96rem;
position: relative; }
.image-swiper .z-f8-p1 {
width: 100%;
position: absolute;
top: 0.58rem;
left: 0;
font-size: 0.42rem;
line-height: 0.42rem;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f8-p2 {
width: 100%;
position: absolute;
top: 1.2rem;
left: 0;
font-size: 0.22rem;
line-height: 0.22rem;
color: #666666;
text-align: center; }
.image-swiper .z-f8-d2 {
width: 100%;
position: relative;
overflow: hidden;
height: 6rem; }
.image-swiper .z-f8-d2 > img {
position: relative;
height: 100%; }
.image-swiper .z-f8-d3 {
width: calc(100% - 0.48rem);
display: flex;
justify-content: space-between;
position: absolute;
top: 0.8rem;
left: 0.24rem; }
.image-swiper .z-f8-d3 > div {
width: 2rem; }
.image-swiper .z-f8-d3 > div:nth-child(1) {
width: 2.4rem; }
.image-swiper .z-f8-d3 > div img {
width: 100%; }
.image-swiper .z-f4-d1 {
width: 100%;
height: 1.96rem;
position: relative; }
.image-swiper .z-f4-p1 {
width: 100%;
position: absolute;
top: 0.58rem;
left: 0;
font-size: 0.42rem;
line-height: 0.42rem;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f4-p2 {
width: 100%;
position: absolute;
top: 1.2rem;
left: 0;
font-size: 0.22rem;
line-height: 0.22rem;
color: #666666;
text-align: center; }
.image-swiper .z-f4-d2 {
width: 100%;
position: relative;
overflow: hidden;
background: #f8f8f8;
padding: 0.5rem 0.33rem;
box-sizing: border-box; }
.image-swiper .z-f4-d4 {
width: 100%;
position: relative; }
.image-swiper .z-f4-d3 {
width: 100%;
height: 1.36rem;
position: relative;
border: 0;
border-radius: 0.1rem;
background: #fff;
margin-bottom: 0.5rem;
overflow: hidden;
box-shadow: 0 0 0.2rem rgba(44, 88, 167, 0.1); }
.image-swiper .z-f4-d3:last-child {
margin-bottom: 0; }
.image-swiper .z-f4-i1 {
position: absolute; }
.image-swiper .z-f4-d3:nth-child(1) .z-f4-i1 {
width: 0.68rem;
top: calc(50% - 0.31rem);
left: 0.98rem; }
.image-swiper .z-f4-d3:nth-child(2) .z-f4-i1 {
width: 0.66rem;
top: calc(50% - 0.32rem);
left: 1.01rem; }
.image-swiper .z-f4-d3:nth-child(3) .z-f4-i1 {
width: 0.62rem;
top: calc(50% - 0.29rem);
left: 1.05rem; }
.image-swiper .z-f4-d3:nth-child(4) .z-f4-i1 {
width: 0.58rem;
top: calc(50% - 0.29rem);
left: 1.1rem; }
.image-swiper .z-f4-p3 {
font-size: 0.28rem;
line-height: 1.36rem;
color: #4c4948;
position: absolute;
top: 0;
left: 2.04rem; }
.image-swiper .z-f5-d1 {
width: 100%;
height: 1.96rem;
position: relative; }
.image-swiper .z-f5-p1 {
width: 100%;
position: absolute;
top: 0.58rem;
left: 0;
font-size: 0.42rem;
line-height: 0.42rem;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f5-p2 {
width: 100%;
position: absolute;
top: 1.2rem;
left: 0;
font-size: 0.22rem;
line-height: 0.22rem;
color: #666666;
text-align: center; }
.image-swiper .z-f5-d2 {
width: 100%;
position: relative;
overflow: hidden;
padding: 0.5rem 0.32rem;
box-sizing: border-box; }
.image-swiper .z-f5-d2 > img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f5-d3 {
width: 100%;
position: relative; }
.image-swiper .z-f5-d4 {
width: 100%;
height: 1.36rem;
position: relative;
margin-bottom: 0.38rem; }
.image-swiper .z-f5-d4:last-child {
margin-bottom: 0; }
.image-swiper .z-f5-i1 {
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f5-i1 img {
width: 100%;
height: 100%; }
.image-swiper .z-f5-d4:nth-child(2n) .z-f5-i1 {
transform: rotateY(180deg); }
.image-swiper .z-f5-i2 {
position: absolute; }
.image-swiper .z-f5-d4:nth-child(1) .z-f5-i2 {
width: 0.49rem;
left: 0.41rem;
top: calc(50% - 0.32rem); }
.image-swiper .z-f5-d4:nth-child(2) .z-f5-i2 {
width: 0.6rem;
left: 0.33rem;
top: calc(50% - 0.28rem); }
.image-swiper .z-f5-d4:nth-child(3) .z-f5-i2 {
width: 0.62rem;
left: 0.37rem;
top: calc(50% - 0.29rem); }
.image-swiper .z-f5-d4:nth-child(4) .z-f5-i2 {
width: 0.55rem;
left: 0.4rem;
top: calc(50% - 0.3rem); }
.image-swiper .z-f5-d4:nth-child(5) .z-f5-i2 {
width: 0.6rem;
left: 0.27rem;
top: calc(50% - 0.25rem); }
.image-swiper .z-f5-d4:nth-child(6) .z-f5-i2 {
width: 0.64rem;
left: 0.4rem;
top: calc(50% - 0.31rem); }
.image-swiper .z-f5-d4:nth-child(7) .z-f5-i2 {
width: 0.54rem;
left: 0.45rem;
top: calc(50% - 0.26rem); }
.image-swiper .z-f5-d4:nth-child(8) .z-f5-i2 {
width: 0.55rem;
left: 0.37rem;
top: calc(50% - 0.28rem); }
.image-swiper .z-f5-p3 {
font-size: 0.24rem;
line-height: 0.36rem;
color: #fff;
text-align: left;
width: 5.3rem;
position: absolute;
top: calc(50% - 0.36rem);
left: 1.24rem; }
.image-swiper .z-f5-d4:nth-child(7) .z-f5-p3 {
top: calc(50% - 0.18rem); }
.image-swiper .z-f5-d4:nth-child(8) .z-f5-p3 {
top: calc(50% - 0.18rem); }
.image-swiper .z-f6-d1 {
width: 100%;
height: 1.96rem;
position: relative; }
.image-swiper .z-f6-p1 {
width: 100%;
position: absolute;
top: 0.58rem;
left: 0;
font-size: 0.42rem;
line-height: 0.42rem;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f6-p2 {
width: 100%;
position: absolute;
top: 1.2rem;
left: 0;
font-size: 0.22rem;
line-height: 0.22rem;
color: #666666;
text-align: center; }
.image-swiper .z-f6-d2 {
width: 100%;
height: 9rem;
position: relative;
overflow: hidden; }
.image-swiper .z-f6-d3 {
width: 6.55rem;
height: 4rem;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f6-d3 > img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f6-d4 {
width: 6.75rem;
height: 5.68rem;
position: absolute;
bottom: 0;
right: 0; }
.image-swiper .z-f6-d4 > img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f6-p3 {
font-size: 0.3rem;
line-height: 0.3rem;
color: #fff;
position: absolute;
top: 0.6rem;
left: 0.24rem; }
.image-swiper .z-f6-d5 {
width: 6rem;
position: absolute;
top: 1.4rem;
left: 0.24rem; }
.image-swiper .z-f6-d6 {
width: 5.2rem;
position: absolute;
top: 1rem;
right: 0.24rem; }
.image-swiper .z-f6-d7 {
position: absolute;
top: 4rem;
right: 0.44rem; }
.image-swiper .z-f6-d7 img {
float: left;
width: 33.33%; }
.image-swiper .z-f11-d5 {
width: 100%;
height: 1.96rem;
position: relative; }
.image-swiper .z-f11-p1 {
width: 100%;
position: absolute;
top: 0.58rem;
left: 0;
font-size: 0.42rem;
line-height: 0.42rem;
color: #3f3e41;
text-align: center; }
.image-swiper .z-f11-p0 {
width: 100%;
position: absolute;
top: 1.2rem;
left: 0;
font-size: 0.22rem;
line-height: 0.22rem;
color: #666666;
text-align: center; }
.image-swiper .z-f11-d1 {
width: 100%;
height: 7.05rem;
position: relative;
overflow: hidden;
background: #2b214f; }
.image-swiper .z-f11-d2 {
width: calc(100% - 0.48rem);
position: absolute;
top: 0.9rem;
left: 0.24rem;
z-index: 10;
height: 1.66rem; }
.image-swiper .z-f11-d3 {
width: 20%;
float: left;
position: relative;
height: 1.66rem; }
.image-swiper .z-f11-i1 {
width: 0.72rem;
position: absolute;
top: 0;
left: calc(50% - 0.36rem); }
.image-swiper .z-f11-p2 {
width: 100%;
height: 0.22rem;
font-size: 0.22rem;
line-height: 0.22rem;
color: #fff;
text-align: center;
font-weight: bold;
position: absolute;
top: 1.18rem;
left: 0; }
.image-swiper .z-f11-d4 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none; }
.image-swiper .z-f11-p3 {
width: 0;
height: 0;
font-size: 0;
line-height: 0;
color: rgba(0, 0, 0, 0);
text-align: center;
position: absolute;
top: 1.66rem;
left: calc(50% - 0.16rem);
border-bottom: 0.16rem solid rgba(195, 178, 255, 0.25);
border-left: 0.16rem solid transparent;
border-right: 0.16rem solid transparent; }
.image-swiper .z-f11-p4 {
width: 500%;
position: absolute;
top: 1.82rem;
left: 0;
padding: 0.25rem 0.5rem;
box-sizing: border-box;
border: 0;
border-radius: 0.1rem;
background: rgba(195, 178, 255, 0.25); }
.image-swiper .z-f11-p4 img {
display: inline-block;
width: 0.3rem;
margin-left: 0.2rem; }
.image-swiper .z-f11-p4 span {
font-size: 0.26rem;
line-height: 0.9rem;
color: #FFFFFF;
display: block;
height: 0.9rem; }
.image-swiper .z-f11-p4 span:nth-child(odd) {
float: left; }
.image-swiper .z-f11-p4 span:nth-child(even) {
float: right; }
.image-swiper .z-f11-bt1 {
display: none; }
.image-swiper .z-f11-d3:nth-child(1) .z-f11-p4 {
left: 0; }
.image-swiper .z-f11-d3:nth-child(2) .z-f11-p4 {
left: -100%; }
.image-swiper .z-f11-d3:nth-child(3) .z-f11-p4 {
left: -200%; }
.image-swiper .z-f11-d3:nth-child(4) .z-f11-p4 {
left: -300%; }
.image-swiper .z-f11-d3:nth-child(5) .z-f11-p4 {
left: -400%; }
.image-swiper .z-f11-t1 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-f11-t2 {
position: absolute; }
.image-swiper .z-f11-t2:nth-child(1) {
width: 1.4rem;
opacity: 0.2;
top: 16%;
left: -2rem;
animation: triangle 32s 4s linear infinite; }
.image-swiper .z-f11-t2:nth-child(2) {
width: 1rem;
opacity: 0.4;
top: 22%;
left: -2rem;
animation: triangle 28s 1s linear infinite; }
.image-swiper .z-f11-t2:nth-child(3) {
width: 0.7rem;
opacity: 0.6;
top: 32%;
left: -2rem;
animation: triangle 24s 3s linear infinite; }
.image-swiper .z-f11-t2:nth-child(4) {
width: 0.5rem;
opacity: 0.8;
top: 36%;
left: -2rem;
animation: triangle 20s 2s linear infinite; }
.image-swiper .z-f11-t2:nth-child(5) {
width: 1.4rem;
opacity: 0.2;
top: 50%;
left: -2rem;
animation: triangle 34s 1s linear infinite; }
.image-swiper .z-f11-t2:nth-child(6) {
width: 1rem;
opacity: 0.4;
top: 62%;
left: -2rem;
animation: triangle 30s 3s linear infinite; }
.image-swiper .z-f11-t2:nth-child(7) {
width: 0.7rem;
opacity: 0.6;
top: 74%;
left: -2rem;
animation: triangle 26s 2s linear infinite; }
.image-swiper .z-f11-t2:nth-child(8) {
width: 0.5rem;
opacity: 0.8;
top: 46%;
left: -2rem;
animation: triangle 22s 4s linear infinite; }
@keyframes triangle {
0% {
transform: translateX(0) translateY(0); }
25% {
transform: translateX(3.5rem) translateY(3rem); }
75% {
transform: translateX(7rem) translateY(-3rem); }
100% {
transform: translateX(10.5rem) translateY(0); } } }
@media only screen and (min-width: 1440px) {
.image-swiper .z-zfb1-a1 {
width: 100%;
height: 847px;
position: relative;
overflow: hidden; }
.image-swiper .z-zfb1-a1 > img {
width: 1920px;
position: absolute;
top: 0;
left: calc(50% - 960px); }
.image-swiper .z-zfb1-a1 > img:nth-child(1) {
display: block; }
.image-swiper .z-zfb1-a1 > img:nth-child(2) {
display: none; }
.image-swiper .z-zfb1-a2 {
font-size: 80px;
line-height: 80px;
color: #fff;
font-weight: bold;
position: absolute;
top: 260px;
left: calc(50% - 650px); }
.image-swiper .z-zfb1-a3 {
font-size: 24px;
line-height: 40px;
color: #fff;
position: absolute;
top: 360px;
left: calc(50% - 650px); }
.image-swiper .z-zfb1-a4 {
width: 496px;
position: absolute;
top: 500px;
left: calc(50% - 684px); }
.image-swiper .z-zfb1-a5 {
width: 1473px;
position: absolute;
top: 90px;
left: calc(50% - 390px); }
.image-swiper .z-zfb1-b1 {
width: 100%;
height: 260px;
position: relative; }
.image-swiper .z-zfb1-b2 {
width: 100%;
font-size: 48px;
line-height: 48px;
color: #333333;
text-align: center;
font-weight: bold;
position: absolute;
top: 96px;
left: 0; }
.image-swiper .z-zfb1-b3 {
width: 120px;
height: 1px;
background: #dcdcdc;
position: absolute;
top: 166px;
left: calc(50% - 60px); }
.image-swiper .z-zfb1-b4 {
width: 100%;
font-size: 22px;
line-height: 22px;
color: #333333;
text-align: center;
font-weight: lighter;
position: absolute;
top: 190px;
left: 0; }
.image-swiper .z-zfb1-c1 {
width: 100%;
height: 760px;
position: relative;
background: #fff; }
.image-swiper .z-zfb1-c2 {
width: 1020px;
position: absolute;
top: 0;
left: calc(50% - 530px); }
.image-swiper .z-zfb1-c4 {
position: absolute; }
.image-swiper .z-zfb1-c4:nth-child(1) {
top: 80px;
right: calc(50% + 292px); }
.image-swiper .z-zfb1-c4:nth-child(2) {
top: 40px;
left: calc(50% + 216px); }
.image-swiper .z-zfb1-c4:nth-child(3) {
top: 690px;
right: calc(50% + 174px); }
.image-swiper .z-zfb1-c4:nth-child(4) {
top: 570px;
left: calc(50% + 270px); }
.image-swiper .z-zfb1-c5 {
width: 30px;
height: 30px;
background: rgba(0, 95, 177, 0.26);
border: 0;
border-radius: 50%;
position: absolute; }
.image-swiper .z-zfb1-c5 > div {
width: 12px;
height: 12px;
border: 0;
border-radius: 50%;
position: absolute;
top: calc(50% - 6px);
left: calc(50% - 6px);
background: -webkit-linear-gradient(#5188d7, #1346eb);
background: -o-linear-gradient(#5188d7, #1346eb);
background: -moz-linear-gradient(#5188d7, #1346eb);
background: linear-gradient(#5188d7, #1346eb); }
.image-swiper .z-zfb1-c4:nth-child(1) .z-zfb1-c5 {
top: 8px;
right: -33px; }
.image-swiper .z-zfb1-c4:nth-child(2) .z-zfb1-c5 {
top: 22px;
left: -44px; }
.image-swiper .z-zfb1-c4:nth-child(3) .z-zfb1-c5 {
top: 6px;
right: -41px; }
.image-swiper .z-zfb1-c4:nth-child(4) .z-zfb1-c5 {
top: 8px;
left: -34px; }
.image-swiper .z-zfb1-c6 {
font-size: 30px;
line-height: 36px;
color: #333333;
font-weight: bold; }
.image-swiper .z-zfb1-c4:nth-child(odd) .z-zfb1-c6 {
text-align: right; }
.image-swiper .z-zfb1-c4:nth-child(even) .z-zfb1-c6 {
text-align: left; }
.image-swiper .z-zfb1-c7 {
font-size: 18px;
line-height: 36px;
color: #333333;
font-weight: lighter;
width: 370px; }
.image-swiper .z-zfb1-c4:nth-child(odd) .z-zfb1-c7 {
text-align: right; }
.image-swiper .z-zfb1-c4:nth-child(even) .z-zfb1-c7 {
text-align: left; }
.image-swiper .z-zfb1-e1 {
width: 100%;
height: 260px;
position: relative; }
.image-swiper .z-zfb1-e2 {
width: 100%;
font-size: 48px;
line-height: 48px;
color: #333333;
text-align: center;
font-weight: bold;
position: absolute;
top: 96px;
left: 0; }
.image-swiper .z-zfb1-e3 {
width: 120px;
height: 1px;
background: #dcdcdc;
position: absolute;
top: 166px;
left: calc(50% - 60px); }
.image-swiper .z-zfb1-e4 {
width: 100%;
font-size: 22px;
line-height: 22px;
color: #333333;
text-align: center;
font-weight: lighter;
position: absolute;
top: 190px;
left: 0; }
.image-swiper .z-zfb1-f1 {
display: none; } }
@media only screen and (min-width: 1800px) {
.image-swiper .z-zfb1-d1 {
width: 100%;
height: 720px;
overflow: hidden;
position: relative; }
.image-swiper .z-zfb1-d1 > img {
width: 1920px;
position: absolute;
top: 0;
left: calc(50% - 960px); }
.image-swiper .z-zfb1-d1 > img:nth-child(1) {
display: block; }
.image-swiper .z-zfb1-d1 > img:nth-child(2) {
display: none; }
.image-swiper .z-zfb1-d9 {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.36);
position: absolute;
top: 104px;
left: 0; }
.image-swiper .z-zfb1-d2 {
width: 1750px;
position: absolute;
top: 88px;
left: calc(50% - 875px);
display: flex;
justify-content: space-between; }
.image-swiper .z-zfb1-d3 {
width: 332px;
position: relative; }
.image-swiper .z-zfb1-d4 {
width: 34px;
height: 34px;
position: relative;
margin: 0 auto;
background: rgba(255, 255, 255, 0.26);
border: 0;
border-radius: 50%;
margin-bottom: 60px; }
.image-swiper .z-zfb1-d4 > div {
width: 18px;
height: 18px;
border: 0;
border-radius: 50%;
position: absolute;
top: calc(50% - 9px);
left: calc(50% - 9px);
background: -webkit-linear-gradient(#fff, #d7d7d8);
background: -o-linear-gradient(#fff, #d7d7d8);
background: -moz-linear-gradient(#fff, #d7d7d8);
background: linear-gradient(#fff, #d7d7d8); }
.image-swiper .z-zfb1-d5 {
width: 100%;
height: 426px;
border: 0;
border-radius: 20px;
background: #fff;
position: relative; }
.image-swiper .z-zfb1-d6 {
width: 260px;
position: absolute;
top: 74px;
left: calc(50% - 130px);
border-top: 1px solid #dfdfdf;
border-bottom: 1px solid #dfdfdf;
padding-top: 16px;
padding-bottom: 10px; }
.image-swiper .z-zfb1-d6 > div:nth-child(1) {
font-size: 22px;
line-height: 30px;
color: #333333;
text-align: center;
font-weight: bold; }
.image-swiper .z-zfb1-d6 > div:nth-child(2) {
font-size: 18px;
line-height: 30px;
color: #666666;
text-align: center;
font-weight: lighter; }
.image-swiper .z-zfb1-d7 {
font-size: 16px;
line-height: 30px;
color: #666666;
font-weight: lighter;
position: absolute;
top: 200px;
left: calc(50% - 120px);
width: 240px; }
.image-swiper .z-zfb1-d8 {
position: absolute;
top: 320px; }
.image-swiper .z-zfb1-d3:nth-child(1) .z-zfb1-d8 {
width: 54px;
left: calc(50% - 27px); }
.image-swiper .z-zfb1-d3:nth-child(2) .z-zfb1-d8 {
width: 53px;
left: calc(50% - 27px); }
.image-swiper .z-zfb1-d3:nth-child(3) .z-zfb1-d8 {
width: 83px;
left: calc(50% - 42px); }
.image-swiper .z-zfb1-d3:nth-child(4) .z-zfb1-d8 {
width: 46px;
left: calc(50% - 23px); }
.image-swiper .z-zfb1-d3:nth-child(5) .z-zfb1-d8 {
width: 50px;
left: calc(50% - 25px); } }
@media only screen and (min-width: 1440px) and (max-width: 1799px) {
.image-swiper .z-zfb1-d1 {
width: 100%;
height: 675px;
overflow: hidden;
position: relative; }
.image-swiper .z-zfb1-d1 > img {
width: 1800px;
position: absolute;
top: 0;
left: calc(50% - 900px); }
.image-swiper .z-zfb1-d1 > img:nth-child(1) {
display: block; }
.image-swiper .z-zfb1-d1 > img:nth-child(2) {
display: none; }
.image-swiper .z-zfb1-d9 {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.36);
position: absolute;
top: 100px;
left: 0; }
.image-swiper .z-zfb1-d2 {
width: 1400px;
position: absolute;
top: 84px;
left: calc(50% - 700px);
display: flex;
justify-content: space-between; }
.image-swiper .z-zfb1-d3 {
width: 260px;
position: relative; }
.image-swiper .z-zfb1-d4 {
width: 34px;
height: 34px;
position: relative;
margin: 0 auto;
background: rgba(255, 255, 255, 0.26);
border: 0;
border-radius: 50%;
margin-bottom: 60px; }
.image-swiper .z-zfb1-d4 > div {
width: 18px;
height: 18px;
border: 0;
border-radius: 50%;
position: absolute;
top: calc(50% - 9px);
left: calc(50% - 9px);
background: -webkit-linear-gradient(#fff, #d7d7d8);
background: -o-linear-gradient(#fff, #d7d7d8);
background: -moz-linear-gradient(#fff, #d7d7d8);
background: linear-gradient(#fff, #d7d7d8); }
.image-swiper .z-zfb1-d5 {
width: 100%;
height: 400px;
border: 0;
border-radius: 20px;
background: #fff;
position: relative; }
.image-swiper .z-zfb1-d6 {
width: 220px;
position: absolute;
top: 60px;
left: calc(50% - 110px);
border-top: 1px solid #dfdfdf;
border-bottom: 1px solid #dfdfdf;
padding-top: 16px;
padding-bottom: 10px; }
.image-swiper .z-zfb1-d6 > div:nth-child(1) {
font-size: 22px;
line-height: 30px;
color: #333333;
text-align: center;
font-weight: bold; }
.image-swiper .z-zfb1-d6 > div:nth-child(2) {
font-size: 18px;
line-height: 30px;
color: #666666;
text-align: center;
font-weight: lighter; }
.image-swiper .z-zfb1-d7 {
font-size: 15px;
line-height: 30px;
color: #666666;
font-weight: lighter;
position: absolute;
top: 180px;
left: calc(50% - 100px);
width: 200px; }
.image-swiper .z-zfb1-d8 {
position: absolute;
top: 300px; }
.image-swiper .z-zfb1-d3:nth-child(1) .z-zfb1-d8 {
width: 54px;
left: calc(50% - 27px); }
.image-swiper .z-zfb1-d3:nth-child(2) .z-zfb1-d8 {
width: 53px;
left: calc(50% - 27px); }
.image-swiper .z-zfb1-d3:nth-child(3) .z-zfb1-d8 {
width: 83px;
left: calc(50% - 42px); }
.image-swiper .z-zfb1-d3:nth-child(4) .z-zfb1-d8 {
width: 46px;
left: calc(50% - 23px); }
.image-swiper .z-zfb1-d3:nth-child(5) .z-zfb1-d8 {
width: 50px;
left: calc(50% - 25px); } }
@media only screen and (max-width: 1439px) and (min-width: 1270px) {
.image-swiper .z-zfb1-a1 {
width: 100%;
height: 635px;
position: relative;
overflow: hidden; }
.image-swiper .z-zfb1-a1 > img {
width: 1440px;
position: absolute;
top: 0;
left: calc(50% - 720px); }
.image-swiper .z-zfb1-a1 > img:nth-child(1) {
display: block; }
.image-swiper .z-zfb1-a1 > img:nth-child(2) {
display: none; }
.image-swiper .z-zfb1-a2 {
font-size: 70px;
line-height: 70px;
color: #fff;
font-weight: bold;
position: absolute;
top: 180px;
left: calc(50% - 600px); }
.image-swiper .z-zfb1-a3 {
font-size: 20px;
line-height: 32px;
color: #fff;
position: absolute;
top: 280px;
left: calc(50% - 600px); }
.image-swiper .z-zfb1-a4 {
width: 400px;
position: absolute;
top: 360px;
left: calc(50% - 600px); }
.image-swiper .z-zfb1-a5 {
width: 1000px;
position: absolute;
top: 120px;
left: calc(50% - 330px); }
.image-swiper .z-zfb1-b1 {
width: 100%;
height: 200px;
position: relative; }
.image-swiper .z-zfb1-b2 {
width: 100%;
font-size: 40px;
line-height: 40px;
color: #333333;
text-align: center;
font-weight: bold;
position: absolute;
top: 50px;
left: 0; }
.image-swiper .z-zfb1-b3 {
width: 120px;
height: 1px;
background: #dcdcdc;
position: absolute;
top: 110px;
left: calc(50% - 60px); }
.image-swiper .z-zfb1-b4 {
width: 100%;
font-size: 18px;
line-height: 18px;
color: #333333;
text-align: center;
font-weight: lighter;
position: absolute;
top: 130px;
left: 0; }
.image-swiper .z-zfb1-c1 {
width: 100%;
height: 620px;
position: relative;
background: #fff; }
.image-swiper .z-zfb1-c2 {
width: 800px;
position: absolute;
top: 0;
left: calc(50% - 390px); }
.image-swiper .z-zfb1-c4 {
position: absolute; }
.image-swiper .z-zfb1-c4:nth-child(1) {
top: 80px;
right: calc(50% + 230px); }
.image-swiper .z-zfb1-c4:nth-child(2) {
top: 20px;
left: calc(50% + 196px); }
.image-swiper .z-zfb1-c4:nth-child(3) {
top: 510px;
right: calc(50% + 174px); }
.image-swiper .z-zfb1-c4:nth-child(4) {
top: 430px;
left: calc(50% + 250px); }
.image-swiper .z-zfb1-c5 {
width: 30px;
height: 30px;
background: rgba(0, 95, 177, 0.26);
border: 0;
border-radius: 50%;
position: absolute; }
.image-swiper .z-zfb1-c5 > div {
width: 12px;
height: 12px;
border: 0;
border-radius: 50%;
position: absolute;
top: calc(50% - 6px);
left: calc(50% - 6px);
background: -webkit-linear-gradient(#5188d7, #1346eb);
background: -o-linear-gradient(#5188d7, #1346eb);
background: -moz-linear-gradient(#5188d7, #1346eb);
background: linear-gradient(#5188d7, #1346eb); }
.image-swiper .z-zfb1-c4:nth-child(1) .z-zfb1-c5 {
top: 8px;
right: -33px; }
.image-swiper .z-zfb1-c4:nth-child(2) .z-zfb1-c5 {
top: 22px;
left: -44px; }
.image-swiper .z-zfb1-c4:nth-child(3) .z-zfb1-c5 {
top: 6px;
right: -41px; }
.image-swiper .z-zfb1-c4:nth-child(4) .z-zfb1-c5 {
top: 8px;
left: -34px; }
.image-swiper .z-zfb1-c6 {
font-size: 24px;
line-height: 30px;
color: #333333;
font-weight: bold; }
.image-swiper .z-zfb1-c4:nth-child(odd) .z-zfb1-c6 {
text-align: right; }
.image-swiper .z-zfb1-c4:nth-child(even) .z-zfb1-c6 {
text-align: left; }
.image-swiper .z-zfb1-c7 {
font-size: 15px;
line-height: 30px;
color: #333333;
font-weight: lighter;
width: 300px; }
.image-swiper .z-zfb1-c4:nth-child(odd) .z-zfb1-c7 {
text-align: right; }
.image-swiper .z-zfb1-c4:nth-child(even) .z-zfb1-c7 {
text-align: left; }
.image-swiper .z-zfb1-e1 {
width: 100%;
height: 200px;
position: relative; }
.image-swiper .z-zfb1-e2 {
width: 100%;
font-size: 40px;
line-height: 40px;
color: #333333;
text-align: center;
font-weight: bold;
position: absolute;
top: 50px;
left: 0; }
.image-swiper .z-zfb1-e3 {
width: 120px;
height: 1px;
background: #dcdcdc;
position: absolute;
top: 110px;
left: calc(50% - 60px); }
.image-swiper .z-zfb1-e4 {
width: 100%;
font-size: 18px;
line-height: 18px;
color: #333333;
text-align: center;
font-weight: lighter;
position: absolute;
top: 130px;
left: 0; }
.image-swiper .z-zfb1-d1 {
width: 100%;
height: 540px;
overflow: hidden;
position: relative; }
.image-swiper .z-zfb1-d1 > img {
width: 1440px;
position: absolute;
top: 0;
left: calc(50% - 720px); }
.image-swiper .z-zfb1-d1 > img:nth-child(1) {
display: block; }
.image-swiper .z-zfb1-d1 > img:nth-child(2) {
display: none; }
.image-swiper .z-zfb1-d9 {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.36);
position: absolute;
top: 70px;
left: 0; }
.image-swiper .z-zfb1-d2 {
width: 1160px;
position: absolute;
top: 54px;
left: calc(50% - 580px);
display: flex;
justify-content: space-between; }
.image-swiper .z-zfb1-d3 {
width: 200px;
position: relative; }
.image-swiper .z-zfb1-d4 {
width: 34px;
height: 34px;
position: relative;
margin: 0 auto;
background: rgba(255, 255, 255, 0.26);
border: 0;
border-radius: 50%;
margin-bottom: 40px; }
.image-swiper .z-zfb1-d4 > div {
width: 18px;
height: 18px;
border: 0;
border-radius: 50%;
position: absolute;
top: calc(50% - 9px);
left: calc(50% - 9px);
background: -webkit-linear-gradient(#fff, #d7d7d8);
background: -o-linear-gradient(#fff, #d7d7d8);
background: -moz-linear-gradient(#fff, #d7d7d8);
background: linear-gradient(#fff, #d7d7d8); }
.image-swiper .z-zfb1-d5 {
width: 100%;
height: 340px;
border: 0;
border-radius: 20px;
background: #fff;
position: relative; }
.image-swiper .z-zfb1-d6 {
width: 180px;
position: absolute;
top: 40px;
left: calc(50% - 90px);
border-top: 1px solid #dfdfdf;
border-bottom: 1px solid #dfdfdf;
padding-top: 16px;
padding-bottom: 10px; }
.image-swiper .z-zfb1-d6 > div:nth-child(1) {
font-size: 20px;
line-height: 24px;
color: #333333;
text-align: center;
font-weight: bold; }
.image-swiper .z-zfb1-d6 > div:nth-child(2) {
font-size: 16px;
line-height: 24px;
color: #666666;
text-align: center;
font-weight: lighter; }
.image-swiper .z-zfb1-d7 {
font-size: 14px;
line-height: 24px;
color: #666666;
font-weight: lighter;
position: absolute;
top: 140px;
left: calc(50% - 80px);
width: 160px; }
.image-swiper .z-zfb1-d8 {
position: absolute;
top: 260px; }
.image-swiper .z-zfb1-d3:nth-child(1) .z-zfb1-d8 {
width: 50px;
left: calc(50% - 25px); }
.image-swiper .z-zfb1-d3:nth-child(2) .z-zfb1-d8 {
width: 50px;
left: calc(50% - 25px); }
.image-swiper .z-zfb1-d3:nth-child(3) .z-zfb1-d8 {
width: 80px;
left: calc(50% - 40px); }
.image-swiper .z-zfb1-d3:nth-child(4) .z-zfb1-d8 {
width: 42px;
left: calc(50% - 21px); }
.image-swiper .z-zfb1-d3:nth-child(5) .z-zfb1-d8 {
width: 46px;
left: calc(50% - 23px); }
.image-swiper .z-zfb1-f1 {
display: none; } }
@media only screen and (max-width: 1269px) and (min-width: 1024px) {
.image-swiper .z-zfb1-a1 {
width: 100%;
height: 560px;
position: relative;
overflow: hidden; }
.image-swiper .z-zfb1-a1 > img {
width: 1270px;
position: absolute;
top: 0;
left: calc(50% - 635px); }
.image-swiper .z-zfb1-a1 > img:nth-child(1) {
display: block; }
.image-swiper .z-zfb1-a1 > img:nth-child(2) {
display: none; }
.image-swiper .z-zfb1-a2 {
font-size: 60px;
line-height: 60px;
color: #fff;
font-weight: bold;
position: absolute;
top: 140px;
left: calc(50% - 480px); }
.image-swiper .z-zfb1-a3 {
font-size: 16px;
line-height: 24px;
color: #fff;
position: absolute;
top: 240px;
left: calc(50% - 480px); }
.image-swiper .z-zfb1-a4 {
width: 320px;
position: absolute;
top: 320px;
left: calc(50% - 480px); }
.image-swiper .z-zfb1-a5 {
width: 800px;
position: absolute;
top: 90px;
left: calc(50% - 240px); }
.image-swiper .z-zfb1-b1 {
width: 100%;
height: 140px;
position: relative; }
.image-swiper .z-zfb1-b2 {
width: 100%;
font-size: 36px;
line-height: 36px;
color: #333333;
text-align: center;
font-weight: bold;
position: absolute;
top: 30px;
left: 0; }
.image-swiper .z-zfb1-b3 {
width: 120px;
height: 1px;
background: #dcdcdc;
position: absolute;
top: 80px;
left: calc(50% - 60px); }
.image-swiper .z-zfb1-b4 {
width: 100%;
font-size: 16px;
line-height: 16px;
color: #333333;
text-align: center;
font-weight: lighter;
position: absolute;
top: 90px;
left: 0; }
.image-swiper .z-zfb1-c1 {
width: 100%;
height: 480px;
position: relative;
background: #fff; }
.image-swiper .z-zfb1-c2 {
width: 600px;
position: absolute;
top: 0;
left: calc(50% - 300px); }
.image-swiper .z-zfb1-c4 {
position: absolute; }
.image-swiper .z-zfb1-c4:nth-child(1) {
top: 80px;
right: calc(50% + 206px); }
.image-swiper .z-zfb1-c4:nth-child(2) {
top: 6px;
left: calc(50% + 146px); }
.image-swiper .z-zfb1-c4:nth-child(3) {
top: 410px;
right: calc(50% + 80px); }
.image-swiper .z-zfb1-c4:nth-child(4) {
top: 370px;
left: calc(50% + 140px); }
.image-swiper .z-zfb1-c5 {
width: 20px;
height: 20px;
background: rgba(0, 95, 177, 0.26);
border: 0;
border-radius: 50%;
position: absolute; }
.image-swiper .z-zfb1-c5 > div {
width: 8px;
height: 8px;
border: 0;
border-radius: 50%;
position: absolute;
top: calc(50% - 4px);
left: calc(50% - 4px);
background: -webkit-linear-gradient(#5188d7, #1346eb);
background: -o-linear-gradient(#5188d7, #1346eb);
background: -moz-linear-gradient(#5188d7, #1346eb);
background: linear-gradient(#5188d7, #1346eb); }
.image-swiper .z-zfb1-c4:nth-child(1) .z-zfb1-c5 {
top: 8px;
right: -33px; }
.image-swiper .z-zfb1-c4:nth-child(2) .z-zfb1-c5 {
top: 22px;
left: -44px; }
.image-swiper .z-zfb1-c4:nth-child(3) .z-zfb1-c5 {
top: 6px;
right: -41px; }
.image-swiper .z-zfb1-c4:nth-child(4) .z-zfb1-c5 {
top: 8px;
left: -34px; }
.image-swiper .z-zfb1-c6 {
font-size: 18px;
line-height: 24px;
color: #333333;
font-weight: bold; }
.image-swiper .z-zfb1-c4:nth-child(odd) .z-zfb1-c6 {
text-align: right; }
.image-swiper .z-zfb1-c4:nth-child(even) .z-zfb1-c6 {
text-align: left; }
.image-swiper .z-zfb1-c7 {
font-size: 12px;
line-height: 24px;
color: #333333;
font-weight: lighter;
width: 300px; }
.image-swiper .z-zfb1-c4:nth-child(odd) .z-zfb1-c7 {
text-align: right; }
.image-swiper .z-zfb1-c4:nth-child(even) .z-zfb1-c7 {
text-align: left; }
.image-swiper .z-zfb1-e1 {
width: 100%;
height: 140px;
position: relative; }
.image-swiper .z-zfb1-e2 {
width: 100%;
font-size: 36px;
line-height: 36px;
color: #333333;
text-align: center;
font-weight: bold;
position: absolute;
top: 30px;
left: 0; }
.image-swiper .z-zfb1-e3 {
width: 120px;
height: 1px;
background: #dcdcdc;
position: absolute;
top: 80px;
left: calc(50% - 60px); }
.image-swiper .z-zfb1-e4 {
width: 100%;
font-size: 16px;
line-height: 16px;
color: #333333;
text-align: center;
font-weight: lighter;
position: absolute;
top: 90px;
left: 0; }
.image-swiper .z-zfb1-d1 {
width: 100%;
height: 480px;
overflow: hidden;
position: relative; }
.image-swiper .z-zfb1-d1 > img {
width: 1280px;
position: absolute;
top: 0;
left: calc(50% - 640px); }
.image-swiper .z-zfb1-d1 > img:nth-child(1) {
display: block; }
.image-swiper .z-zfb1-d1 > img:nth-child(2) {
display: none; }
.image-swiper .z-zfb1-d9 {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.36);
position: absolute;
top: 50px;
left: 0; }
.image-swiper .z-zfb1-d2 {
width: 920px;
position: absolute;
top: 36px;
left: calc(50% - 460px);
display: flex;
justify-content: space-between; }
.image-swiper .z-zfb1-d3 {
width: 160px;
position: relative; }
.image-swiper .z-zfb1-d4 {
width: 30px;
height: 30px;
position: relative;
margin: 0 auto;
background: rgba(255, 255, 255, 0.26);
border: 0;
border-radius: 50%;
margin-bottom: 30px; }
.image-swiper .z-zfb1-d4 > div {
width: 14px;
height: 14px;
border: 0;
border-radius: 50%;
position: absolute;
top: calc(50% - 7px);
left: calc(50% - 7px);
background: -webkit-linear-gradient(#fff, #d7d7d8);
background: -o-linear-gradient(#fff, #d7d7d8);
background: -moz-linear-gradient(#fff, #d7d7d8);
background: linear-gradient(#fff, #d7d7d8); }
.image-swiper .z-zfb1-d5 {
width: 100%;
height: 320px;
border: 0;
border-radius: 20px;
background: #fff;
position: relative; }
.image-swiper .z-zfb1-d6 {
width: 140px;
position: absolute;
top: 40px;
left: calc(50% - 70px);
border-top: 1px solid #dfdfdf;
border-bottom: 1px solid #dfdfdf;
padding-top: 10px;
padding-bottom: 6px; }
.image-swiper .z-zfb1-d6 > div:nth-child(1) {
font-size: 16px;
line-height: 20px;
color: #333333;
text-align: center;
font-weight: bold; }
.image-swiper .z-zfb1-d6 > div:nth-child(2) {
font-size: 12px;
line-height: 20px;
color: #666666;
text-align: center;
font-weight: lighter; }
.image-swiper .z-zfb1-d7 {
font-size: 12px;
line-height: 20px;
color: #666666;
font-weight: lighter;
position: absolute;
top: 120px;
left: calc(50% - 60px);
width: 120px; }
.image-swiper .z-zfb1-d8 {
position: absolute;
top: 240px; }
.image-swiper .z-zfb1-d3:nth-child(1) .z-zfb1-d8 {
width: 44px;
left: calc(50% - 22px); }
.image-swiper .z-zfb1-d3:nth-child(2) .z-zfb1-d8 {
width: 44px;
left: calc(50% - 22px); }
.image-swiper .z-zfb1-d3:nth-child(3) .z-zfb1-d8 {
width: 74px;
left: calc(50% - 37px); }
.image-swiper .z-zfb1-d3:nth-child(4) .z-zfb1-d8 {
width: 36px;
left: calc(50% - 18px); }
.image-swiper .z-zfb1-d3:nth-child(5) .z-zfb1-d8 {
width: 40px;
left: calc(50% - 20px); }
.image-swiper .z-zfb1-f1 {
display: none; } }
@media only screen and (max-width: 1023px) {
.image-swiper .z-zfb1-a1 {
width: 100%;
position: relative;
overflow: hidden; }
.image-swiper .z-zfb1-a1 > img {
width: 100%;
position: relative; }
.image-swiper .z-zfb1-a1 > img:nth-child(1) {
display: none; }
.image-swiper .z-zfb1-a1 > img:nth-child(2) {
display: block; }
.image-swiper .z-zfb1-a2 {
font-size: 0.8rem;
line-height: 0.8rem;
color: #fff;
font-weight: bold;
text-align: center;
position: absolute;
top: 2.96rem;
left: 0;
width: 100%; }
.image-swiper .z-zfb1-a3 {
font-size: 0.24rem;
line-height: 0.4rem;
color: #fff;
position: absolute;
top: 3.96rem;
left: 1.12rem; }
.image-swiper .z-zfb1-a4 {
width: 4.4rem;
position: absolute;
top: 0.36rem;
left: 1.32rem; }
.image-swiper .z-zfb1-a5 {
width: 12rem;
position: absolute;
top: 5.14rem;
left: -1.8rem; }
.image-swiper .z-zfb1-b1 {
width: 100%;
height: 2.6rem;
position: relative; }
.image-swiper .z-zfb1-b2 {
width: 100%;
font-size: 0.48rem;
line-height: 0.48rem;
color: #333333;
text-align: center;
font-weight: bold;
position: absolute;
top: 0.5rem;
left: 0; }
.image-swiper .z-zfb1-b3 {
width: 1.2rem;
height: 1px;
background: #dcdcdc;
position: absolute;
top: 1.24rem;
left: calc(50% - 0.6rem); }
.image-swiper .z-zfb1-b4 {
width: 100%;
font-size: 0.24rem;
line-height: 0.4rem;
color: #333333;
text-align: center;
font-weight: lighter;
position: absolute;
top: 1.4rem;
left: calc(50% - 2.5rem);
width: 5rem; }
.image-swiper .z-zfb1-c1 {
width: 100%;
position: relative;
background: #fff; }
.image-swiper .z-zfb1-c2 {
width: calc(100% - 0.48rem);
position: relative;
margin: 0 auto; }
.image-swiper .z-zfb1-c3 {
width: calc(100% - 0.48rem);
position: relative;
margin: 0 auto; }
.image-swiper .z-zfb1-c4 {
position: relative;
width: 100%;
padding-left: 0.7rem;
margin-bottom: 0.34rem;
box-sizing: border-box; }
.image-swiper .z-zfb1-c5 {
width: 0.4rem;
height: 0.4rem;
background: rgba(0, 95, 177, 0.26);
border: 0;
border-radius: 50%;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-zfb1-c5 > div {
width: 0.28rem;
height: 0.28rem;
border: 0;
border-radius: 50%;
position: absolute;
top: calc(50% - 0.14rem);
left: calc(50% - 0.14rem);
background: -webkit-linear-gradient(#5188d7, #1346eb);
background: -o-linear-gradient(#5188d7, #1346eb);
background: -moz-linear-gradient(#5188d7, #1346eb);
background: linear-gradient(#5188d7, #1346eb); }
.image-swiper .z-zfb1-c6 {
font-size: 0.3rem;
line-height: 0.4rem;
color: #333333;
font-weight: bold; }
.image-swiper .z-zfb1-c7 {
font-size: 0.24rem;
line-height: 0.4rem;
color: #333333;
font-weight: lighter; }
.image-swiper .z-zfb1-e1 {
width: 100%;
height: 0;
position: relative;
z-index: 10; }
.image-swiper .z-zfb1-e2 {
width: 100%;
font-size: 0.48rem;
line-height: 0.48rem;
color: #fff;
text-align: center;
font-weight: bold;
position: absolute;
top: 0.9rem;
left: 0; }
.image-swiper .z-zfb1-e3 {
width: 1.2rem;
height: 1px;
background: #fff;
position: absolute;
top: 1.6rem;
left: calc(50% - 0.6rem); }
.image-swiper .z-zfb1-e4 {
width: 100%;
font-size: 0.24rem;
line-height: 0.4rem;
color: #fff;
text-align: center;
font-weight: lighter;
position: absolute;
top: 1.8rem;
left: calc(50% - 2.5rem);
width: 5rem; }
.image-swiper .z-zfb1-d1 {
width: 100%;
overflow: hidden;
position: relative; }
.image-swiper .z-zfb1-d1 > img {
width: 100%;
position: relative; }
.image-swiper .z-zfb1-d1 > img:nth-child(1) {
display: none; }
.image-swiper .z-zfb1-d1 > img:nth-child(2) {
display: block; }
.image-swiper .z-zfb1-d9 {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.36);
position: absolute;
top: 3.3rem;
left: 0; }
.image-swiper .z-zfb1-d2 {
display: none; }
.image-swiper .z-zfb1-d3 {
width: 100%;
position: relative; }
.image-swiper .z-zfb1-d4 {
width: 0.34rem;
height: 0.34rem;
position: relative;
margin: 0 auto;
background: rgba(255, 255, 255, 0.26);
border: 0;
border-radius: 50%;
margin-bottom: 0.7rem; }
.image-swiper .z-zfb1-d4 > div {
width: 0.18rem;
height: 0.18rem;
border: 0;
border-radius: 50%;
position: absolute;
top: calc(50% - 0.09rem);
left: calc(50% - 0.09rem);
background: -webkit-linear-gradient(#fff, #d7d7d8);
background: -o-linear-gradient(#fff, #d7d7d8);
background: -moz-linear-gradient(#fff, #d7d7d8);
background: linear-gradient(#fff, #d7d7d8); }
.image-swiper .z-zfb1-d5 {
width: 5.54rem;
height: 7.1rem;
border: 0;
border-radius: 0.2rem;
background: #fff;
position: relative; }
.image-swiper .z-zfb1-d6 {
width: 4.32rem;
position: absolute;
top: 1.23rem;
left: calc(50% - 2.16rem);
border-top: 1px solid #dfdfdf;
border-bottom: 1px solid #dfdfdf;
padding-top: 0.3rem;
padding-bottom: 0.18rem; }
.image-swiper .z-zfb1-d6 > div:nth-child(1) {
font-size: 0.36rem;
line-height: 0.48rem;
color: #333333;
text-align: center;
font-weight: bold; }
.image-swiper .z-zfb1-d6 > div:nth-child(2) {
font-size: 0.26rem;
line-height: 0.48rem;
color: #666666;
text-align: center;
font-weight: lighter; }
.image-swiper .z-zfb1-d7 {
font-size: 0.24rem;
line-height: 0.48rem;
color: #666666;
font-weight: lighter;
position: absolute;
top: 3.33rem;
left: calc(50% - 2.15rem);
width: 4.3rem; }
.image-swiper .z-zfb1-d8 {
position: absolute;
top: 5.34rem;
left: 0;
height: 0.9rem;
width: 100%; }
.image-swiper .z-zfb1-d8 img {
height: 100%;
width: auto !important;
margin: 0 auto; }
.image-swiper .z-zfb1-f1 {
width: 100%;
height: 8.15rem;
position: absolute;
top: 3.15rem;
left: 0;
overflow: hidden; }
.image-swiper .zfb1 {
width: calc(5.74rem*3) !important;
height: 100%;
position: absolute;
top: 0;
left: calc(50% - (5.74rem*1.5)); } }
@media only screen and (min-width: 1500px) {
.image-swiper .z-xxl1-a1 {
width: 100%;
height: 850px;
position: relative;
overflow: hidden; }
.image-swiper .z-xxl1-a1 > img {
width: 1920px;
position: absolute;
top: 0;
left: calc(50% - 960px); }
.image-swiper .z-xxl1-a1 > img:nth-child(1) {
display: block; }
.image-swiper .z-xxl1-a1 > img:nth-child(2) {
display: none; }
.image-swiper .z-xxl1-a2 {
width: 693px;
position: absolute;
top: 102px;
left: calc(50% - 730px); }
.image-swiper .z-xxl1-a3 {
font-size: 42px;
line-height: 42px;
color: #fff;
position: absolute;
top: 224px;
left: calc(50% + 105px); }
.image-swiper .z-xxl1-a4 {
font-size: 80px;
line-height: 80px;
color: #fff;
position: absolute;
top: 300px;
left: calc(50% + 105px); }
.image-swiper .z-xxl1-a5 {
font-size: 44px;
line-height: 44px;
color: #fff;
position: absolute;
top: 430px;
left: calc(50% + 105px); }
.image-swiper .z-xxl1-b1 {
width: 100%;
height: 640px;
position: relative;
overflow: hidden; }
.image-swiper .z-xxl1-b2 {
width: 432px;
position: absolute;
bottom: 0;
right: calc(50% - 650px); }
.image-swiper .z-xxl1-b3 {
font-size: 40px;
line-height: 40px;
color: #303030;
position: absolute;
top: 126px;
left: calc(50% - 710px); }
.image-swiper .z-xxl1-b4 {
font-size: 16px;
line-height: 36px;
color: #303030;
position: absolute;
top: 196px;
left: calc(50% - 710px);
width: 680px; }
.image-swiper .z-xxl1-b5 {
position: absolute;
top: 326px;
left: calc(50% - 720px); }
.image-swiper .z-xxl1-b6 {
width: 205px;
height: 248px;
border: 1px solid #d8dbdd;
border-radius: 16px;
background: #fff;
box-sizing: border-box;
position: relative;
float: left;
margin-right: 45px; }
.image-swiper .z-xxl1-b6 > div:nth-child(1) {
width: 100%;
height: 60px;
position: absolute;
top: 34px;
left: 0; }
.image-swiper .z-xxl1-b6 > div:nth-child(2) {
width: 100%;
font-size: 18px;
line-height: 44px;
color: #2270ff;
text-align: center;
position: absolute;
top: 124px;
left: 0; }
.image-swiper .z-xxl1-b6 > div:nth-child(3) {
width: 100%;
font-size: 16px;
line-height: 44px;
color: #717171;
text-align: center;
position: absolute;
top: 176px;
left: 0; }
.image-swiper .z-xxl1-b6 > div:nth-child(1) img {
height: 100%;
margin: 0 auto; }
.image-swiper .z-xxl1-b6 > div:nth-child(2) span {
font-size: 50px;
line-height: 44px;
color: #2270ff;
font-family: "din"; }
.image-swiper .z-xxl1-c1 {
width: 100%; }
.image-swiper .z-xxl1-c2 {
width: 100%;
font-size: 40px;
line-height: 40px;
color: #333333;
text-align: center;
padding-top: 80px;
padding-bottom: 50px; }
.image-swiper .z-xxl1-c3 {
width: 100%;
height: 690px;
background: #262731;
position: relative;
overflow: hidden; }
.image-swiper .z-xxl1-c4 {
width: 396px;
position: absolute;
bottom: 0;
left: calc(50% - 495px); }
.image-swiper .z-xxl1-c5 > div:nth-child(1) {
position: absolute;
top: 464px;
left: calc(50% - 720px); }
.image-swiper .z-xxl1-c5 > div:nth-child(1) > div:nth-child(1) {
width: 254px;
position: relative; }
.image-swiper .z-xxl1-c5 > div:nth-child(1) > div:nth-child(2) {
font-size: 22px;
line-height: 22px;
color: #ffffff;
position: absolute;
top: -30px;
left: 26px; }
.image-swiper .z-xxl1-c5 > div:nth-child(2) {
position: absolute;
top: 280px;
left: calc(50% - 120px); }
.image-swiper .z-xxl1-c5 > div:nth-child(2) > div:nth-child(1) {
width: 368px;
position: relative; }
.image-swiper .z-xxl1-c5 > div:nth-child(2) > div:nth-child(2) {
position: absolute;
top: -12px;
left: 378px; }
.image-swiper .z-xxl1-c5 > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) {
font-size: 40px;
line-height: 40px;
color: #fff;
margin-bottom: 20px; }
.image-swiper .z-xxl1-c5 > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) {
font-size: 16px;
line-height: 48px;
color: #fff;
width: 468px; }
.image-swiper .z-xxl1-d1 {
width: 100%; }
.image-swiper .z-xxl1-d2 {
width: 100%;
font-size: 40px;
line-height: 40px;
color: #333333;
text-align: center;
padding-top: 80px;
padding-bottom: 50px; }
.image-swiper .z-xxl1-d3 {
width: 100%;
height: 645px;
overflow: hidden;
position: relative; }
.image-swiper .z-xxl1-d3 > img {
width: 1920px;
position: absolute;
top: 0;
left: calc(50% - 960px); }
.image-swiper .z-xxl1-d3 > img:nth-child(1) {
display: block; }
.image-swiper .z-xxl1-d3 > img:nth-child(2) {
display: none; }
.image-swiper .z-xxl1-d4 {
width: 1440px;
position: absolute;
top: 434px;
left: calc(50% - 720px); }
.image-swiper .z-xxl1-d5 {
width: calc(426px * 3);
position: absolute;
top: 150px;
left: calc(50% - (426px*1.5));
display: flex;
justify-content: space-between; }
.image-swiper .z-xxl1-d6 {
width: 426px; }
.image-swiper .z-xxl1-d6 > div:nth-child(1) {
width: 184px;
margin: 0 auto;
margin-bottom: 28px;
transition: 0.5s; }
.image-swiper .z-xxl1-d6 > div:nth-child(1):hover {
transform: rotateY(360deg);
transition: 0.5s; }
.image-swiper .z-xxl1-d6 > div:nth-child(2) {
width: 100%;
font-size: 20px;
line-height: 48px;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-e1 {
width: 100%; }
.image-swiper .z-xxl1-e2 {
width: 100%;
font-size: 40px;
line-height: 40px;
color: #333333;
text-align: center;
padding-top: 80px;
padding-bottom: 50px; }
.image-swiper .z-xxl1-e3 {
width: 1440px;
position: relative;
margin: 0 auto;
display: flex;
justify-content: space-between; }
.image-swiper .z-xxl1-e4 {
width: 333px;
height: 100%;
position: relative; }
.image-swiper .z-xxl1-e4 > img {
position: relative; }
.image-swiper .z-xxl1-e4 > div:nth-child(2) {
width: 172px;
position: absolute;
top: 84px;
left: calc(50% - 172px/2);
transition: 0.5s; }
.image-swiper .z-xxl1-e4:hover > div:nth-child(2) {
transform: rotateY(360deg);
transition: 0.5s; }
.image-swiper .z-xxl1-e4 > div:nth-child(3) {
width: 96%;
position: absolute;
top: 300px;
left: 2%;
font-size: 20px;
line-height: 48px;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-f1 {
width: 100%; }
.image-swiper .z-xxl1-f2 {
width: 100%;
font-size: 40px;
line-height: 40px;
color: #333333;
text-align: center;
padding-top: 80px;
padding-bottom: 50px; }
.image-swiper .z-xxl1-f3 {
width: 100%;
height: 510px;
position: relative; }
.image-swiper .z-xxl1-f3:nth-child(1) {
background: #262731; }
.image-swiper .z-xxl1-f3:nth-child(2) {
background: #fff; }
.image-swiper .z-xxl1-f3:nth-child(3) {
background: #f4f4f4; }
.image-swiper .z-xxl1-f4 {
width: 396px;
position: absolute;
bottom: 0; }
.image-swiper .z-xxl1-f3:nth-child(odd) .z-xxl1-f4 {
left: calc(50% - 574px); }
.image-swiper .z-xxl1-f3:nth-child(even) .z-xxl1-f4 {
right: calc(50% - 666px); }
.image-swiper .z-xxl1-f3:nth-child(2) .z-xxl1-f4 {
width: 650px;
bottom: 28px; }
.image-swiper .z-xxl1-f5 {
font-size: 40px;
line-height: 40px;
color: #333333;
position: absolute;
top: 166px; }
.image-swiper .z-xxl1-f3:nth-child(odd) .z-xxl1-f5 {
left: calc(50% + 120px); }
.image-swiper .z-xxl1-f3:nth-child(even) .z-xxl1-f5 {
left: calc(50% - 585px); }
.image-swiper .z-xxl1-f3:nth-child(1) .z-xxl1-f5 {
color: #fff; }
.image-swiper .z-xxl1-f6 {
font-size: 18px;
line-height: 28px;
color: #333;
position: absolute;
top: 240px; }
.image-swiper .z-xxl1-f3:nth-child(odd) .z-xxl1-f6 {
left: calc(50% + 120px); }
.image-swiper .z-xxl1-f3:nth-child(even) .z-xxl1-f6 {
left: calc(50% - 585px); }
.image-swiper .z-xxl1-f3:nth-child(1) .z-xxl1-f6 {
color: #fff; }
.image-swiper .z-xxl1-f7 {
height: 65px;
position: absolute;
top: 310px; }
.image-swiper .z-xxl1-f3:nth-child(odd) .z-xxl1-f7 {
left: calc(50% + 120px); }
.image-swiper .z-xxl1-f3:nth-child(even) .z-xxl1-f7 {
left: calc(50% - 585px); }
.image-swiper .z-xxl1-f7 img {
height: 100%; }
.image-swiper .z-xxl1-g1 {
width: 100%; }
.image-swiper .z-xxl1-g2 {
width: 100%;
font-size: 40px;
line-height: 40px;
color: #333333;
text-align: center;
padding-top: 80px;
padding-bottom: 50px; }
.image-swiper .z-xxl1-g3 {
width: 1440px;
margin: 0 auto; }
.image-swiper .z-xxl1-g4 {
width: 700px;
height: 385px;
position: relative;
border: 0;
border-radius: 20px; }
.image-swiper .z-xxl1-g4:nth-child(1) {
float: left;
background: -webkit-linear-gradient(-30deg, #0073ef, #1684ff, #00a6ff);
background: -o-linear-gradient(-30deg, #0073ef, #1684ff, #00a6ff);
background: -moz-linear-gradient(-30deg, #0073ef, #1684ff, #00a6ff);
background: linear-gradient(-30deg, #0073ef, #1684ff, #00a6ff); }
.image-swiper .z-xxl1-g4:nth-child(2) {
float: right;
background: -webkit-linear-gradient(-30deg, #564bb3, #6a47ca, #8b51d9);
background: -o-linear-gradient(-30deg, #564bb3, #6a47ca, #8b51d9);
background: -moz-linear-gradient(-30deg, #564bb3, #6a47ca, #8b51d9);
background: linear-gradient(-30deg, #564bb3, #6a47ca, #8b51d9); }
.image-swiper .z-xxl1-g4 > div:nth-child(1) {
width: 100%;
position: absolute;
top: 64px;
left: 0;
font-size: 26px;
line-height: 26px;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-g4 > div:nth-child(2) {
width: 60px;
height: 2px;
background: #fff;
position: absolute;
top: 108px;
left: calc(50% - 30px); }
.image-swiper .z-xxl1-g4 > div:nth-child(3) {
width: 100%;
position: absolute;
top: 132px;
left: 0;
font-size: 20px;
line-height: 20px;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-g4 > div:nth-child(4) {
width: calc(100% - 2*66px);
position: absolute;
top: 188px;
left: 66px;
font-size: 16px;
line-height: 28px;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-g4:nth-child(2) > div:nth-child(4) > div {
font-size: 16px;
line-height: 28px;
color: #fff;
position: relative;
text-align: left; }
.image-swiper .z-xxl1-g4:nth-child(2) > div:nth-child(4) > div:nth-child(1) {
width: 300px;
float: left;
border-right: 1px solid rgba(255, 255, 255, 0.3); }
.image-swiper .z-xxl1-g4:nth-child(2) > div:nth-child(4) > div:nth-child(2) {
width: 212px;
float: right; }
.image-swiper .z-xxl1-g4:nth-child(2) > div:nth-child(4) > div > div {
font-size: 28px;
line-height: 28px;
color: #fff;
font-family: "din";
position: absolute;
top: 0;
left: -40px; }
.image-swiper .z-xxl1-h1 {
width: 100%; }
.image-swiper .z-xxl1-h2 {
width: 100%;
font-size: 40px;
line-height: 40px;
color: #333333;
text-align: center;
padding-top: 80px;
padding-bottom: 50px; }
.image-swiper .z-xxl1-h3 {
width: 100%;
height: 842px;
position: relative;
overflow: hidden;
background: #262731; }
.image-swiper .z-xxl1-h4 {
width: 100%;
position: absolute;
top: 60px;
left: 0;
font-size: 26px;
line-height: 26px;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-h5 {
width: 1500px;
position: absolute;
top: 145px;
left: calc(50% - 750px);
height: calc(100% - 145px); }
.image-swiper .xxl1 {
width: 100% !important;
height: 600px;
position: absolute;
top: 0;
left: 0; }
.image-swiper .xxl1 .swiper-slide {
width: 50% !important;
height: 100%; }
.image-swiper .xxl1 .swiper-slide > img {
width: 658px;
margin: 0 auto;
margin-bottom: 38px; }
.image-swiper .xxl1 .swiper-slide > div {
font-size: 18px;
line-height: 18px;
color: #fff;
text-align: center; }
.image-swiper .xxl2 {
width: 100%;
bottom: 50px !important; }
.image-swiper .xxl2 .swiper-pagination-bullet {
width: 15px;
height: 15px;
border: 0;
border-radius: 50%;
background: #fff;
opacity: 1;
margin: 0 10px;
transition: 0.5s; }
.image-swiper .xxl2 .swiper-pagination-bullet-active {
background: -webkit-linear-gradient(-30deg, #7841ff, #6257ff, #088dff);
background: -o-linear-gradient(-30deg, #7841ff, #6257ff, #088dff);
background: -moz-linear-gradient(-30deg, #7841ff, #6257ff, #088dff);
background: linear-gradient(-30deg, #7841ff, #6257ff, #088dff);
transition: 0.5s; }
.image-swiper .z-xxl1-i1 {
width: 100%; }
.image-swiper .z-xxl1-i2 {
width: 100%;
font-size: 40px;
line-height: 40px;
color: #333333;
text-align: center;
padding-top: 80px;
padding-bottom: 50px; }
.image-swiper .z-xxl1-i3 {
width: 100%;
height: 310px;
position: relative; }
.image-swiper .z-xxl1-i4 {
font-size: 30px;
line-height: 30px;
color: #333333;
position: absolute;
top: 22px;
left: calc(50% - 720px); }
.image-swiper .z-xxl1-i5 {
width: 1440px;
position: absolute;
top: 90px;
left: calc(50% - 720px);
display: flex;
justify-content: space-between; }
.image-swiper .z-xxl1-i6 {
width: 287px;
height: 54px;
border: 1px solid #d8dbdd;
border-radius: 4px;
box-sizing: border-box;
position: relative; }
.image-swiper .z-xxl1-i6:last-child {
width: 205px;
border: 0;
background: #3b7afb; }
.image-swiper .z-xxl1-i6 input {
width: calc(100% - 2*22px);
height: 48px;
border: 0;
outline: none;
display: block;
background: none;
font-size: 16px;
line-height: 48px;
color: #7f7f7f;
position: absolute;
top: 0;
left: 22px; }
.image-swiper .z-xxl1-i6:last-child div {
position: relative;
width: 100%;
font-size: 16px;
line-height: 52px;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-i6:last-child input {
width: 100%;
left: 0;
opacity: 0;
cursor: pointer; } }
@media only screen and (max-width: 1499px) and (min-width: 1300px) {
.image-swiper .z-xxl1-a1 {
width: 100%;
height: 664px;
position: relative;
overflow: hidden; }
.image-swiper .z-xxl1-a1 > img {
width: 1500px;
position: absolute;
top: 0;
left: calc(50% - 750px); }
.image-swiper .z-xxl1-a1 > img:nth-child(1) {
display: block; }
.image-swiper .z-xxl1-a1 > img:nth-child(2) {
display: none; }
.image-swiper .z-xxl1-a2 {
width: 580px;
position: absolute;
top: 40px;
left: calc(50% - 600px); }
.image-swiper .z-xxl1-a3 {
font-size: 36px;
line-height: 36px;
color: #fff;
position: absolute;
top: 180px;
left: calc(50% + 105px); }
.image-swiper .z-xxl1-a4 {
font-size: 70px;
line-height: 70px;
color: #fff;
position: absolute;
top: 260px;
left: calc(50% + 105px); }
.image-swiper .z-xxl1-a5 {
font-size: 38px;
line-height: 38px;
color: #fff;
position: absolute;
top: 380px;
left: calc(50% + 105px); }
.image-swiper .z-xxl1-b1 {
width: 100%;
height: 560px;
position: relative;
overflow: hidden; }
.image-swiper .z-xxl1-b2 {
width: 360px;
position: absolute;
bottom: 0;
right: calc(50% - 560px); }
.image-swiper .z-xxl1-b3 {
font-size: 32px;
line-height: 32px;
color: #303030;
position: absolute;
top: 80px;
left: calc(50% - 620px); }
.image-swiper .z-xxl1-b4 {
font-size: 14px;
line-height: 32px;
color: #303030;
position: absolute;
top: 140px;
left: calc(50% - 620px);
width: 600px; }
.image-swiper .z-xxl1-b5 {
position: absolute;
top: 250px;
left: calc(50% - 620px); }
.image-swiper .z-xxl1-b6 {
width: 180px;
height: 220px;
border: 1px solid #d8dbdd;
border-radius: 16px;
background: #fff;
box-sizing: border-box;
position: relative;
float: left;
margin-right: 40px; }
.image-swiper .z-xxl1-b6 > div:nth-child(1) {
width: 100%;
height: 52px;
position: absolute;
top: 30px;
left: 0; }
.image-swiper .z-xxl1-b6 > div:nth-child(2) {
width: 100%;
font-size: 16px;
line-height: 40px;
color: #2270ff;
text-align: center;
position: absolute;
top: 100px;
left: 0; }
.image-swiper .z-xxl1-b6 > div:nth-child(3) {
width: 100%;
font-size: 14px;
line-height: 40px;
color: #717171;
text-align: center;
position: absolute;
top: 150px;
left: 0; }
.image-swiper .z-xxl1-b6 > div:nth-child(1) img {
height: 100%;
margin: 0 auto; }
.image-swiper .z-xxl1-b6 > div:nth-child(2) span {
font-size: 42px;
line-height: 40px;
color: #2270ff;
font-family: "din"; }
.image-swiper .z-xxl1-c1 {
width: 100%; }
.image-swiper .z-xxl1-c2 {
width: 100%;
font-size: 32px;
line-height: 32px;
color: #333333;
text-align: center;
padding-top: 60px;
padding-bottom: 40px; }
.image-swiper .z-xxl1-c3 {
width: 100%;
height: 580px;
background: #262731;
position: relative;
overflow: hidden; }
.image-swiper .z-xxl1-c4 {
width: 340px;
position: absolute;
bottom: 0;
left: calc(50% - 400px); }
.image-swiper .z-xxl1-c5 > div:nth-child(1) {
position: absolute;
top: 464px;
left: calc(50% - 630px); }
.image-swiper .z-xxl1-c5 > div:nth-child(1) > div:nth-child(1) {
width: 254px;
position: relative; }
.image-swiper .z-xxl1-c5 > div:nth-child(1) > div:nth-child(2) {
font-size: 20px;
line-height: 20px;
color: #ffffff;
position: absolute;
top: -30px;
left: 26px; }
.image-swiper .z-xxl1-c5 > div:nth-child(2) {
position: absolute;
top: 280px;
left: calc(50% - 120px); }
.image-swiper .z-xxl1-c5 > div:nth-child(2) > div:nth-child(1) {
width: 368px;
position: relative; }
.image-swiper .z-xxl1-c5 > div:nth-child(2) > div:nth-child(2) {
position: absolute;
top: -12px;
left: 378px; }
.image-swiper .z-xxl1-c5 > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) {
font-size: 32px;
line-height: 32px;
color: #fff;
margin-bottom: 16px; }
.image-swiper .z-xxl1-c5 > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) {
font-size: 14px;
line-height: 40px;
color: #fff;
width: 360px; }
.image-swiper .z-xxl1-d1 {
width: 100%; }
.image-swiper .z-xxl1-d2 {
width: 100%;
font-size: 32px;
line-height: 32px;
color: #333333;
text-align: center;
padding-top: 60px;
padding-bottom: 40px; }
.image-swiper .z-xxl1-d3 {
width: 100%;
height: 500px;
overflow: hidden;
position: relative; }
.image-swiper .z-xxl1-d3 > img {
width: 1500px;
position: absolute;
top: 0;
left: calc(50% - 750px); }
.image-swiper .z-xxl1-d3 > img:nth-child(1) {
display: block; }
.image-swiper .z-xxl1-d3 > img:nth-child(2) {
display: none; }
.image-swiper .z-xxl1-d4 {
width: 1240px;
position: absolute;
top: 320px;
left: calc(50% - 620px); }
.image-swiper .z-xxl1-d5 {
width: calc(400px * 3);
position: absolute;
top: 80px;
left: calc(50% - (400px*1.5));
display: flex;
justify-content: space-between; }
.image-swiper .z-xxl1-d6 {
width: 400px; }
.image-swiper .z-xxl1-d6 > div:nth-child(1) {
width: 150px;
margin: 0 auto;
margin-bottom: 20px;
transition: 0.5s; }
.image-swiper .z-xxl1-d6 > div:nth-child(1):hover {
transform: rotateY(360deg);
transition: 0.5s; }
.image-swiper .z-xxl1-d6 > div:nth-child(2) {
width: 100%;
font-size: 18px;
line-height: 44px;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-e1 {
width: 100%; }
.image-swiper .z-xxl1-e2 {
width: 100%;
font-size: 32px;
line-height: 32px;
color: #333333;
text-align: center;
padding-top: 60px;
padding-bottom: 40px; }
.image-swiper .z-xxl1-e3 {
width: 1240px;
position: relative;
margin: 0 auto;
display: flex;
justify-content: space-between; }
.image-swiper .z-xxl1-e4 {
width: 280px;
height: 100%;
position: relative; }
.image-swiper .z-xxl1-e4 > img {
position: relative; }
.image-swiper .z-xxl1-e4 > div:nth-child(2) {
width: 140px;
position: absolute;
top: 60px;
left: calc(50% - 140px/2);
transition: 0.5s; }
.image-swiper .z-xxl1-e4:hover > div:nth-child(2) {
transform: rotateY(360deg);
transition: 0.5s; }
.image-swiper .z-xxl1-e4 > div:nth-child(3) {
width: 96%;
position: absolute;
top: 260px;
left: 2%;
font-size: 18px;
line-height: 44px;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-f1 {
width: 100%; }
.image-swiper .z-xxl1-f2 {
width: 100%;
font-size: 32px;
line-height: 32px;
color: #333333;
text-align: center;
padding-top: 60px;
padding-bottom: 40px; }
.image-swiper .z-xxl1-f3 {
width: 100%;
height: 440px;
position: relative; }
.image-swiper .z-xxl1-f3:nth-child(1) {
background: #262731; }
.image-swiper .z-xxl1-f3:nth-child(2) {
background: #fff; }
.image-swiper .z-xxl1-f3:nth-child(3) {
background: #f4f4f4; }
.image-swiper .z-xxl1-f4 {
width: 340px;
position: absolute;
bottom: 0; }
.image-swiper .z-xxl1-f3:nth-child(odd) .z-xxl1-f4 {
left: calc(50% - 574px); }
.image-swiper .z-xxl1-f3:nth-child(even) .z-xxl1-f4 {
right: calc(50% - 600px); }
.image-swiper .z-xxl1-f3:nth-child(2) .z-xxl1-f4 {
width: 580px;
bottom: 28px; }
.image-swiper .z-xxl1-f5 {
font-size: 32px;
line-height: 32px;
color: #333333;
position: absolute;
top: 120px; }
.image-swiper .z-xxl1-f3:nth-child(odd) .z-xxl1-f5 {
left: calc(50% + 80px); }
.image-swiper .z-xxl1-f3:nth-child(even) .z-xxl1-f5 {
left: calc(50% - 545px); }
.image-swiper .z-xxl1-f3:nth-child(1) .z-xxl1-f5 {
color: #fff; }
.image-swiper .z-xxl1-f6 {
font-size: 16px;
line-height: 24px;
color: #333;
position: absolute;
top: 200px; }
.image-swiper .z-xxl1-f3:nth-child(odd) .z-xxl1-f6 {
left: calc(50% + 80px); }
.image-swiper .z-xxl1-f3:nth-child(even) .z-xxl1-f6 {
left: calc(50% - 545px); }
.image-swiper .z-xxl1-f3:nth-child(1) .z-xxl1-f6 {
color: #fff; }
.image-swiper .z-xxl1-f7 {
height: 60px;
position: absolute;
top: 270px; }
.image-swiper .z-xxl1-f3:nth-child(odd) .z-xxl1-f7 {
left: calc(50% + 80px); }
.image-swiper .z-xxl1-f3:nth-child(even) .z-xxl1-f7 {
left: calc(50% - 545px); }
.image-swiper .z-xxl1-f7 img {
height: 100%; }
.image-swiper .z-xxl1-g1 {
width: 100%; }
.image-swiper .z-xxl1-g2 {
width: 100%;
font-size: 32px;
line-height: 32px;
color: #333333;
text-align: center;
padding-top: 60px;
padding-bottom: 40px; }
.image-swiper .z-xxl1-g3 {
width: 1240px;
margin: 0 auto; }
.image-swiper .z-xxl1-g4 {
width: 600px;
height: 320px;
position: relative;
border: 0;
border-radius: 20px; }
.image-swiper .z-xxl1-g4:nth-child(1) {
float: left;
background: -webkit-linear-gradient(-30deg, #0073ef, #1684ff, #00a6ff);
background: -o-linear-gradient(-30deg, #0073ef, #1684ff, #00a6ff);
background: -moz-linear-gradient(-30deg, #0073ef, #1684ff, #00a6ff);
background: linear-gradient(-30deg, #0073ef, #1684ff, #00a6ff); }
.image-swiper .z-xxl1-g4:nth-child(2) {
float: right;
background: -webkit-linear-gradient(-30deg, #564bb3, #6a47ca, #8b51d9);
background: -o-linear-gradient(-30deg, #564bb3, #6a47ca, #8b51d9);
background: -moz-linear-gradient(-30deg, #564bb3, #6a47ca, #8b51d9);
background: linear-gradient(-30deg, #564bb3, #6a47ca, #8b51d9); }
.image-swiper .z-xxl1-g4 > div:nth-child(1) {
width: 100%;
position: absolute;
top: 50px;
left: 0;
font-size: 24px;
line-height: 24px;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-g4 > div:nth-child(2) {
width: 60px;
height: 2px;
background: #fff;
position: absolute;
top: 96px;
left: calc(50% - 30px); }
.image-swiper .z-xxl1-g4 > div:nth-child(3) {
width: 100%;
position: absolute;
top: 124px;
left: 0;
font-size: 18px;
line-height: 18px;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-g4 > div:nth-child(4) {
width: calc(100% - 2*50px);
position: absolute;
top: 160px;
left: 50px;
font-size: 14px;
line-height: 24px;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-g4:nth-child(2) > div:nth-child(4) > div {
font-size: 14px;
line-height: 24px;
color: #fff;
position: relative;
text-align: left; }
.image-swiper .z-xxl1-g4:nth-child(2) > div:nth-child(4) > div:nth-child(1) {
width: 260px;
float: left;
border-right: 1px solid rgba(255, 255, 255, 0.3); }
.image-swiper .z-xxl1-g4:nth-child(2) > div:nth-child(4) > div:nth-child(2) {
width: 200px;
float: right; }
.image-swiper .z-xxl1-g4:nth-child(2) > div:nth-child(4) > div > div {
font-size: 24px;
line-height: 24px;
color: #fff;
font-family: "din";
position: absolute;
top: 0;
left: -30px; }
.image-swiper .z-xxl1-h1 {
width: 100%; }
.image-swiper .z-xxl1-h2 {
width: 100%;
font-size: 32px;
line-height: 32px;
color: #333333;
text-align: center;
padding-top: 60px;
padding-bottom: 40px; }
.image-swiper .z-xxl1-h3 {
width: 100%;
height: 720px;
position: relative;
overflow: hidden;
background: #262731; }
.image-swiper .z-xxl1-h4 {
width: 100%;
position: absolute;
top: 50px;
left: 0;
font-size: 24px;
line-height: 24px;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-h5 {
width: 1240px;
position: absolute;
top: 120px;
left: calc(50% - 620px);
height: calc(100% - 120px); }
.image-swiper .xxl1 {
width: 100% !important;
height: 540px;
position: absolute;
top: 0;
left: 0; }
.image-swiper .xxl1 .swiper-slide {
width: 50% !important;
height: 100%; }
.image-swiper .xxl1 .swiper-slide > img {
width: 560px;
margin: 0 auto;
margin-bottom: 30px; }
.image-swiper .xxl1 .swiper-slide > div {
font-size: 16px;
line-height: 16px;
color: #fff;
text-align: center; }
.image-swiper .xxl2 {
width: 100%;
bottom: 50px !important; }
.image-swiper .xxl2 .swiper-pagination-bullet {
width: 15px;
height: 15px;
border: 0;
border-radius: 50%;
background: #fff;
opacity: 1;
margin: 0 10px;
transition: 0.5s; }
.image-swiper .xxl2 .swiper-pagination-bullet-active {
background: -webkit-linear-gradient(-30deg, #7841ff, #6257ff, #088dff);
background: -o-linear-gradient(-30deg, #7841ff, #6257ff, #088dff);
background: -moz-linear-gradient(-30deg, #7841ff, #6257ff, #088dff);
background: linear-gradient(-30deg, #7841ff, #6257ff, #088dff);
transition: 0.5s; }
.image-swiper .z-xxl1-i1 {
width: 100%; }
.image-swiper .z-xxl1-i2 {
width: 100%;
font-size: 32px;
line-height: 32px;
color: #333333;
text-align: center;
padding-top: 60px;
padding-bottom: 40px; }
.image-swiper .z-xxl1-i3 {
width: 100%;
height: 240px;
position: relative; }
.image-swiper .z-xxl1-i4 {
font-size: 26px;
line-height: 26px;
color: #333333;
position: absolute;
top: 20px;
left: calc(50% - 620px); }
.image-swiper .z-xxl1-i5 {
width: 1240px;
position: absolute;
top: 70px;
left: calc(50% - 620px);
display: flex;
justify-content: space-between; }
.image-swiper .z-xxl1-i6 {
width: 240px;
height: 48px;
border: 1px solid #d8dbdd;
border-radius: 4px;
box-sizing: border-box;
position: relative; }
.image-swiper .z-xxl1-i6:last-child {
width: 180px;
border: 0;
background: #3b7afb; }
.image-swiper .z-xxl1-i6 input {
width: calc(100% - 2*16px);
height: 44px;
border: 0;
outline: none;
display: block;
background: none;
font-size: 14px;
line-height: 44px;
color: #7f7f7f;
position: absolute;
top: 0;
left: 16px; }
.image-swiper .z-xxl1-i6:last-child div {
position: relative;
width: 100%;
font-size: 14px;
line-height: 46px;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-i6:last-child input {
width: 100%;
left: 0;
opacity: 0;
cursor: pointer; } }
@media only screen and (max-width: 1299px) and (min-width: 1024px) {
.image-swiper .z-xxl1-a1 {
width: 100%;
height: 576px;
position: relative;
overflow: hidden; }
.image-swiper .z-xxl1-a1 > img {
width: 1300px;
position: absolute;
top: 0;
left: calc(50% - 650px); }
.image-swiper .z-xxl1-a1 > img:nth-child(1) {
display: block; }
.image-swiper .z-xxl1-a1 > img:nth-child(2) {
display: none; }
.image-swiper .z-xxl1-a2 {
width: 440px;
position: absolute;
top: 80px;
left: calc(50% - 460px); }
.image-swiper .z-xxl1-a3 {
font-size: 28px;
line-height: 28px;
color: #fff;
position: absolute;
top: 160px;
left: calc(50% + 60px); }
.image-swiper .z-xxl1-a4 {
font-size: 60px;
line-height: 60px;
color: #fff;
position: absolute;
top: 220px;
left: calc(50% + 60px); }
.image-swiper .z-xxl1-a5 {
font-size: 30px;
line-height: 30px;
color: #fff;
position: absolute;
top: 320px;
left: calc(50% + 60px); }
.image-swiper .z-xxl1-b1 {
width: 100%;
height: 480px;
position: relative;
overflow: hidden; }
.image-swiper .z-xxl1-b2 {
width: 320px;
position: absolute;
bottom: 0;
right: calc(50% - 480px); }
.image-swiper .z-xxl1-b3 {
font-size: 24px;
line-height: 24px;
color: #303030;
position: absolute;
top: 60px;
left: calc(50% - 480px); }
.image-swiper .z-xxl1-b4 {
font-size: 12px;
line-height: 24px;
color: #303030;
position: absolute;
top: 120px;
left: calc(50% - 480px);
width: 500px; }
.image-swiper .z-xxl1-b5 {
position: absolute;
top: 200px;
left: calc(50% - 480px); }
.image-swiper .z-xxl1-b6 {
width: 140px;
height: 180px;
border: 1px solid #d8dbdd;
border-radius: 16px;
background: #fff;
box-sizing: border-box;
position: relative;
float: left;
margin-right: 30px; }
.image-swiper .z-xxl1-b6 > div:nth-child(1) {
width: 100%;
height: 44px;
position: absolute;
top: 24px;
left: 0; }
.image-swiper .z-xxl1-b6 > div:nth-child(2) {
width: 100%;
font-size: 14px;
line-height: 32px;
color: #2270ff;
text-align: center;
position: absolute;
top: 90px;
left: 0; }
.image-swiper .z-xxl1-b6 > div:nth-child(3) {
width: 100%;
font-size: 12px;
line-height: 32px;
color: #717171;
text-align: center;
position: absolute;
top: 130px;
left: 0; }
.image-swiper .z-xxl1-b6 > div:nth-child(1) img {
height: 100%;
margin: 0 auto; }
.image-swiper .z-xxl1-b6 > div:nth-child(2) span {
font-size: 36px;
line-height: 32px;
color: #2270ff;
font-family: "din"; }
.image-swiper .z-xxl1-c1 {
width: 100%; }
.image-swiper .z-xxl1-c2 {
width: 100%;
font-size: 24px;
line-height: 24px;
color: #333333;
text-align: center;
padding-top: 40px;
padding-bottom: 30px; }
.image-swiper .z-xxl1-c3 {
width: 100%;
height: 480px;
background: #262731;
position: relative;
overflow: hidden; }
.image-swiper .z-xxl1-c4 {
width: 280px;
position: absolute;
bottom: 0;
left: calc(50% - 300px); }
.image-swiper .z-xxl1-c5 > div:nth-child(1) {
position: absolute;
top: 300px;
left: calc(50% - 500px); }
.image-swiper .z-xxl1-c5 > div:nth-child(1) > div:nth-child(1) {
width: 220px;
position: relative; }
.image-swiper .z-xxl1-c5 > div:nth-child(1) > div:nth-child(2) {
font-size: 18px;
line-height: 18px;
color: #ffffff;
position: absolute;
top: -24px;
left: 24px; }
.image-swiper .z-xxl1-c5 > div:nth-child(2) {
position: absolute;
top: 220px;
left: calc(50% - 100px); }
.image-swiper .z-xxl1-c5 > div:nth-child(2) > div:nth-child(1) {
width: 260px;
position: relative; }
.image-swiper .z-xxl1-c5 > div:nth-child(2) > div:nth-child(2) {
position: absolute;
top: -12px;
left: 280px; }
.image-swiper .z-xxl1-c5 > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) {
font-size: 24px;
line-height: 24px;
color: #fff;
margin-bottom: 12px; }
.image-swiper .z-xxl1-c5 > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) {
font-size: 14px;
line-height: 28px;
color: #fff;
width: 300px; }
.image-swiper .z-xxl1-d1 {
width: 100%; }
.image-swiper .z-xxl1-d2 {
width: 100%;
font-size: 24px;
line-height: 24px;
color: #333333;
text-align: center;
padding-top: 40px;
padding-bottom: 30px; }
.image-swiper .z-xxl1-d3 {
width: 100%;
height: 436px;
overflow: hidden;
position: relative; }
.image-swiper .z-xxl1-d3 > img {
width: 1300px;
position: absolute;
top: 0;
left: calc(50% - 650px); }
.image-swiper .z-xxl1-d3 > img:nth-child(1) {
display: block; }
.image-swiper .z-xxl1-d3 > img:nth-child(2) {
display: none; }
.image-swiper .z-xxl1-d4 {
width: 960px;
position: absolute;
top: 280px;
left: calc(50% - 480px); }
.image-swiper .z-xxl1-d5 {
width: calc(320px * 3);
position: absolute;
top: 60px;
left: calc(50% - (320px*1.5));
display: flex;
justify-content: space-between; }
.image-swiper .z-xxl1-d6 {
width: 320px; }
.image-swiper .z-xxl1-d6 > div:nth-child(1) {
width: 120px;
margin: 0 auto;
margin-bottom: 16px;
transition: 0.5s; }
.image-swiper .z-xxl1-d6 > div:nth-child(1):hover {
transform: rotateY(360deg);
transition: 0.5s; }
.image-swiper .z-xxl1-d6 > div:nth-child(2) {
width: 100%;
font-size: 16px;
line-height: 36px;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-e1 {
width: 100%; }
.image-swiper .z-xxl1-e2 {
width: 100%;
font-size: 24px;
line-height: 24px;
color: #333333;
text-align: center;
padding-top: 40px;
padding-bottom: 30px; }
.image-swiper .z-xxl1-e3 {
width: 960px;
position: relative;
margin: 0 auto;
display: flex;
justify-content: space-between; }
.image-swiper .z-xxl1-e4 {
width: 220px;
height: 100%;
position: relative; }
.image-swiper .z-xxl1-e4 > img {
position: relative; }
.image-swiper .z-xxl1-e4 > div:nth-child(2) {
width: 110px;
position: absolute;
top: 50px;
left: calc(50% - 110px/2);
transition: 0.5s; }
.image-swiper .z-xxl1-e4:hover > div:nth-child(2) {
transform: rotateY(360deg);
transition: 0.5s; }
.image-swiper .z-xxl1-e4 > div:nth-child(3) {
width: 96%;
position: absolute;
top: 200px;
left: 2%;
font-size: 14px;
line-height: 28px;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-f1 {
width: 100%; }
.image-swiper .z-xxl1-f2 {
width: 100%;
font-size: 24px;
line-height: 24px;
color: #333333;
text-align: center;
padding-top: 40px;
padding-bottom: 30px; }
.image-swiper .z-xxl1-f3 {
width: 100%;
height: 360px;
position: relative; }
.image-swiper .z-xxl1-f3:nth-child(1) {
background: #262731; }
.image-swiper .z-xxl1-f3:nth-child(2) {
background: #fff; }
.image-swiper .z-xxl1-f3:nth-child(3) {
background: #f4f4f4; }
.image-swiper .z-xxl1-f4 {
width: 280px;
position: absolute;
bottom: 0; }
.image-swiper .z-xxl1-f3:nth-child(odd) .z-xxl1-f4 {
left: calc(50% - 400px); }
.image-swiper .z-xxl1-f3:nth-child(even) .z-xxl1-f4 {
right: calc(50% - 440px); }
.image-swiper .z-xxl1-f3:nth-child(2) .z-xxl1-f4 {
width: 440px;
bottom: 20px; }
.image-swiper .z-xxl1-f5 {
font-size: 24px;
line-height: 24px;
color: #333333;
position: absolute;
top: 80px; }
.image-swiper .z-xxl1-f3:nth-child(odd) .z-xxl1-f5 {
left: calc(50% + 40px); }
.image-swiper .z-xxl1-f3:nth-child(even) .z-xxl1-f5 {
left: calc(50% - 400px); }
.image-swiper .z-xxl1-f3:nth-child(1) .z-xxl1-f5 {
color: #fff; }
.image-swiper .z-xxl1-f6 {
font-size: 14px;
line-height: 24px;
color: #333;
position: absolute;
top: 150px; }
.image-swiper .z-xxl1-f3:nth-child(odd) .z-xxl1-f6 {
left: calc(50% + 40px); }
.image-swiper .z-xxl1-f3:nth-child(even) .z-xxl1-f6 {
left: calc(50% - 400px); }
.image-swiper .z-xxl1-f3:nth-child(1) .z-xxl1-f6 {
color: #fff; }
.image-swiper .z-xxl1-f7 {
height: 50px;
position: absolute;
top: 220px; }
.image-swiper .z-xxl1-f3:nth-child(odd) .z-xxl1-f7 {
left: calc(50% + 40px); }
.image-swiper .z-xxl1-f3:nth-child(even) .z-xxl1-f7 {
left: calc(50% - 400px); }
.image-swiper .z-xxl1-f7 img {
height: 100%; }
.image-swiper .z-xxl1-g1 {
width: 100%; }
.image-swiper .z-xxl1-g2 {
width: 100%;
font-size: 24px;
line-height: 24px;
color: #333333;
text-align: center;
padding-top: 40px;
padding-bottom: 30px; }
.image-swiper .z-xxl1-g3 {
width: 960px;
margin: 0 auto; }
.image-swiper .z-xxl1-g4 {
width: 460px;
height: 260px;
position: relative;
border: 0;
border-radius: 20px; }
.image-swiper .z-xxl1-g4:nth-child(1) {
float: left;
background: -webkit-linear-gradient(-30deg, #0073ef, #1684ff, #00a6ff);
background: -o-linear-gradient(-30deg, #0073ef, #1684ff, #00a6ff);
background: -moz-linear-gradient(-30deg, #0073ef, #1684ff, #00a6ff);
background: linear-gradient(-30deg, #0073ef, #1684ff, #00a6ff); }
.image-swiper .z-xxl1-g4:nth-child(2) {
float: right;
background: -webkit-linear-gradient(-30deg, #564bb3, #6a47ca, #8b51d9);
background: -o-linear-gradient(-30deg, #564bb3, #6a47ca, #8b51d9);
background: -moz-linear-gradient(-30deg, #564bb3, #6a47ca, #8b51d9);
background: linear-gradient(-30deg, #564bb3, #6a47ca, #8b51d9); }
.image-swiper .z-xxl1-g4 > div:nth-child(1) {
width: 100%;
position: absolute;
top: 32px;
left: 0;
font-size: 20px;
line-height: 20px;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-g4 > div:nth-child(2) {
width: 60px;
height: 2px;
background: #fff;
position: absolute;
top: 70px;
left: calc(50% - 30px); }
.image-swiper .z-xxl1-g4 > div:nth-child(3) {
width: 100%;
position: absolute;
top: 88px;
left: 0;
font-size: 16px;
line-height: 16px;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-g4 > div:nth-child(4) {
width: calc(100% - 2*30px);
position: absolute;
top: 120px;
left: 30px;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-g4:nth-child(2) > div:nth-child(4) > div {
font-size: 12px;
line-height: 20px;
color: #fff;
position: relative;
text-align: left; }
.image-swiper .z-xxl1-g4:nth-child(2) > div:nth-child(4) > div:nth-child(1) {
width: 200px;
float: left;
border-right: 1px solid rgba(255, 255, 255, 0.3); }
.image-swiper .z-xxl1-g4:nth-child(2) > div:nth-child(4) > div:nth-child(2) {
width: 170px;
float: right; }
.image-swiper .z-xxl1-g4:nth-child(2) > div:nth-child(4) > div > div {
font-size: 20px;
line-height: 20px;
color: #fff;
font-family: "din";
position: absolute;
top: 0;
left: -20px; }
.image-swiper .z-xxl1-h1 {
width: 100%; }
.image-swiper .z-xxl1-h2 {
width: 100%;
font-size: 24px;
line-height: 24px;
color: #333333;
text-align: center;
padding-top: 40px;
padding-bottom: 30px; }
.image-swiper .z-xxl1-h3 {
width: 100%;
height: 540px;
position: relative;
overflow: hidden;
background: #262731; }
.image-swiper .z-xxl1-h4 {
width: 100%;
position: absolute;
top: 30px;
left: 0;
font-size: 20px;
line-height: 20px;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-h5 {
width: 960px;
position: absolute;
top: 80px;
left: calc(50% - 480px);
height: calc(100% - 80px); }
.image-swiper .xxl1 {
width: 100% !important;
height: 440px;
position: absolute;
top: 0;
left: 0; }
.image-swiper .xxl1 .swiper-slide {
width: 50% !important;
height: 100%; }
.image-swiper .xxl1 .swiper-slide > img {
width: 420px;
margin: 0 auto;
margin-bottom: 30px; }
.image-swiper .xxl1 .swiper-slide > div {
font-size: 14px;
line-height: 14px;
color: #fff;
text-align: center; }
.image-swiper .xxl2 {
width: 100%;
bottom: 40px !important; }
.image-swiper .xxl2 .swiper-pagination-bullet {
width: 15px;
height: 15px;
border: 0;
border-radius: 50%;
background: #fff;
opacity: 1;
margin: 0 10px;
transition: 0.5s; }
.image-swiper .xxl2 .swiper-pagination-bullet-active {
background: -webkit-linear-gradient(-30deg, #7841ff, #6257ff, #088dff);
background: -o-linear-gradient(-30deg, #7841ff, #6257ff, #088dff);
background: -moz-linear-gradient(-30deg, #7841ff, #6257ff, #088dff);
background: linear-gradient(-30deg, #7841ff, #6257ff, #088dff);
transition: 0.5s; }
.image-swiper .z-xxl1-i1 {
width: 100%; }
.image-swiper .z-xxl1-i2 {
width: 100%;
font-size: 24px;
line-height: 24px;
color: #333333;
text-align: center;
padding-top: 40px;
padding-bottom: 30px; }
.image-swiper .z-xxl1-i3 {
width: 100%;
height: 200px;
position: relative; }
.image-swiper .z-xxl1-i4 {
font-size: 20px;
line-height: 20px;
color: #333333;
position: absolute;
top: 20px;
left: calc(50% - 480px); }
.image-swiper .z-xxl1-i5 {
width: 960px;
position: absolute;
top: 60px;
left: calc(50% - 480px);
display: flex;
justify-content: space-between; }
.image-swiper .z-xxl1-i6 {
width: 180px;
height: 42px;
border: 1px solid #d8dbdd;
border-radius: 4px;
box-sizing: border-box;
position: relative; }
.image-swiper .z-xxl1-i6:last-child {
width: 160px;
border: 0;
background: #3b7afb; }
.image-swiper .z-xxl1-i6 input {
width: calc(100% - 2*12px);
height: 38px;
border: 0;
outline: none;
display: block;
background: none;
font-size: 14px;
line-height: 38px;
color: #7f7f7f;
position: absolute;
top: 0;
left: 16px; }
.image-swiper .z-xxl1-i6:last-child div {
position: relative;
width: 100%;
font-size: 14px;
line-height: 42px;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-i6:last-child input {
width: 100%;
left: 0;
opacity: 0;
cursor: pointer; } }
@media only screen and (max-width: 1023px) {
.image-swiper .z-xxl1-a1 {
width: 100%;
position: relative;
overflow: hidden; }
.image-swiper .z-xxl1-a1 > img {
width: 100%;
position: relative; }
.image-swiper .z-xxl1-a1 > img:nth-child(1) {
display: none; }
.image-swiper .z-xxl1-a1 > img:nth-child(2) {
display: block; }
.image-swiper .z-xxl1-a2 {
width: 3.04rem;
position: absolute;
top: 0.54rem;
left: 0.36rem; }
.image-swiper .z-xxl1-a3 {
font-size: 0.18rem;
line-height: 0.18rem;
color: #fff;
position: absolute;
top: 1.08rem;
left: calc(50% + 0.26rem); }
.image-swiper .z-xxl1-a4 {
font-size: 0.35rem;
line-height: 0.35rem;
color: #fff;
position: absolute;
top: 1.4rem;
left: calc(50% + 0.26rem); }
.image-swiper .z-xxl1-a5 {
font-size: 0.2rem;
line-height: 0.2rem;
color: #fff;
position: absolute;
top: 1.98rem;
left: calc(50% + 0.26rem); }
.image-swiper .z-xxl1-b1 {
width: 100%;
height: 8.06rem;
position: relative;
overflow: hidden; }
.image-swiper .z-xxl1-b2 {
width: 4.26rem;
position: absolute;
bottom: 0;
right: 0.14rem; }
.image-swiper .z-xxl1-b3 {
font-size: 0.38rem;
line-height: 0.38rem;
color: #303030;
position: absolute;
top: 0.52rem;
left: 0.24rem; }
.image-swiper .z-xxl1-b4 {
font-size: 0.24rem;
line-height: 0.36rem;
color: #303030;
position: absolute;
top: 1.26rem;
left: 0.24rem;
width: calc(100% - 0.48rem); }
.image-swiper .z-xxl1-b5 {
position: absolute;
top: 2.32rem;
left: 0.24rem; }
.image-swiper .z-xxl1-b6 {
width: 2.48rem;
height: 1.68rem;
border: 1px solid #d8dbdd;
border-radius: 0.2rem;
background: #fff;
box-sizing: border-box;
position: relative;
margin-bottom: 0.36rem; }
.image-swiper .z-xxl1-b6 > div:nth-child(1) {
width: 100%;
height: 0.6rem;
position: absolute;
top: 0.34rem;
left: 0.45rem; }
.image-swiper .z-xxl1-b6 > div:nth-child(2) {
width: 100%;
font-size: 0.22rem;
line-height: 0.44rem;
color: #2270ff;
position: absolute;
top: 0.52rem;
left: 1.24rem; }
.image-swiper .z-xxl1-b6 > div:nth-child(3) {
width: 100%;
font-size: 0.22rem;
line-height: 0.22rem;
color: #717171;
text-align: center;
position: absolute;
top: 1.2rem;
left: 0; }
.image-swiper .z-xxl1-b6 > div:nth-child(1) img {
height: 100%; }
.image-swiper .z-xxl1-b6 > div:nth-child(2) span {
font-size: 0.5rem;
line-height: 0.44rem;
color: #2270ff;
font-family: "din"; }
.image-swiper .z-xxl1-c1 {
width: 100%; }
.image-swiper .z-xxl1-c2 {
width: 100%;
font-size: 0.38rem;
line-height: 0.38rem;
color: #333333;
text-align: center;
padding-top: 0.66rem;
padding-bottom: 0.66rem; }
.image-swiper .z-xxl1-c3 {
width: 100%;
height: 6.9rem;
background: #262731;
position: relative;
overflow: hidden; }
.image-swiper .z-xxl1-c4 {
width: 3.46rem;
position: absolute;
bottom: 0;
left: 0.24rem; }
.image-swiper .z-xxl1-c5 > div:nth-child(1) {
position: absolute;
top: 5.4rem;
left: calc(50% - 0.3rem); }
.image-swiper .z-xxl1-c5 > div:nth-child(1) > div:nth-child(1) {
width: 2.78rem;
position: relative;
transform: rotate(180deg); }
.image-swiper .z-xxl1-c5 > div:nth-child(1) > div:nth-child(2) {
font-size: 0.22rem;
line-height: 0.22rem;
color: #ffffff;
position: absolute;
top: 0.3rem;
left: 1.94rem;
width: 1.6rem; }
.image-swiper .z-xxl1-c5 > div:nth-child(2) {
position: absolute;
top: 3.4rem;
left: calc(50% - 0.3rem); }
.image-swiper .z-xxl1-c5 > div:nth-child(2) > div:nth-child(1) {
width: 2.78rem;
position: relative;
transform: rotate(180deg); }
.image-swiper .z-xxl1-c5 > div:nth-child(2) > div:nth-child(2) {
position: absolute;
top: -2.4rem;
left: 0.48rem; }
.image-swiper .z-xxl1-c5 > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) {
font-size: 0.32rem;
line-height: 0.32rem;
color: #fff;
margin-bottom: 0.16rem; }
.image-swiper .z-xxl1-c5 > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) {
font-size: 0.22rem;
line-height: 0.36rem;
color: #fff;
width: 3.32rem; }
.image-swiper .z-xxl1-d1 {
width: 100%; }
.image-swiper .z-xxl1-d2 {
width: 100%;
font-size: 0.38rem;
line-height: 0.38rem;
color: #333333;
text-align: center;
padding-top: 0.66rem;
padding-bottom: 0.66rem; }
.image-swiper .z-xxl1-d3 {
width: 100%;
height: 6.4rem;
overflow: hidden;
position: relative; }
.image-swiper .z-xxl1-d3 > img {
width: 100%;
position: relative; }
.image-swiper .z-xxl1-d3 > img:nth-child(1) {
display: none; }
.image-swiper .z-xxl1-d3 > img:nth-child(2) {
display: block; }
.image-swiper .z-xxl1-d4 {
width: calc(100% - 0.48rem);
position: absolute;
top: 4.3rem;
left: 0.24rem; }
.image-swiper .z-xxl1-d5 {
width: calc(100% - 0.48rem);
position: absolute;
top: 1.14rem;
left: 0.24rem;
display: flex;
justify-content: space-between; }
.image-swiper .z-xxl1-d6 {
width: 1.84rem; }
.image-swiper .z-xxl1-d6 > div:nth-child(1) {
width: 1.62rem;
margin: 0 auto;
margin-bottom: 0.3rem; }
.image-swiper .z-xxl1-d6 > div:nth-child(2) {
width: 100%;
font-size: 0.22rem;
line-height: 0.48rem;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-e1 {
width: 100%; }
.image-swiper .z-xxl1-e2 {
width: 100%;
font-size: 0.38rem;
line-height: 0.38rem;
color: #333333;
text-align: center;
padding-top: 0.66rem;
padding-bottom: 0.66rem; }
.image-swiper .z-xxl1-e3 {
width: calc(100% - 0.48rem);
position: relative;
margin: 0 auto; }
.image-swiper .z-xxl1-e4 {
width: calc(50% - 0.12rem);
height: 100%;
position: relative;
margin-bottom: 0.32rem; }
.image-swiper .z-xxl1-e4:nth-child(odd) {
float: left; }
.image-swiper .z-xxl1-e4:nth-child(even) {
float: right; }
.image-swiper .z-xxl1-e4:nth-child(3) {
margin-bottom: 0; }
.image-swiper .z-xxl1-e4:nth-child(4) {
margin-bottom: 0; }
.image-swiper .z-xxl1-e4 > img {
position: relative; }
.image-swiper .z-xxl1-e4 > div:nth-child(2) {
width: 1.72rem;
position: absolute;
top: 0.84rem;
left: calc(50% - 1.72rem/2); }
.image-swiper .z-xxl1-e4 > div:nth-child(3) {
width: 96%;
position: absolute;
top: 3rem;
left: 2%;
font-size: 0.22rem;
line-height: 0.48rem;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-f1 {
width: 100%; }
.image-swiper .z-xxl1-f2 {
width: 100%;
font-size: 0.38rem;
line-height: 0.38rem;
color: #333333;
text-align: center;
padding-top: 0.66rem;
padding-bottom: 0.66rem; }
.image-swiper .z-xxl1-f3 {
width: 100%;
height: 5.1rem;
position: relative; }
.image-swiper .z-xxl1-f3:nth-child(1) {
background: #262731; }
.image-swiper .z-xxl1-f3:nth-child(2) {
background: #fff; }
.image-swiper .z-xxl1-f3:nth-child(3) {
background: #f4f4f4; }
.image-swiper .z-xxl1-f4 {
width: 3.74rem;
position: absolute;
bottom: 0; }
.image-swiper .z-xxl1-f3:nth-child(odd) .z-xxl1-f4 {
left: 0.2rem; }
.image-swiper .z-xxl1-f3:nth-child(even) .z-xxl1-f4 {
right: 0.14rem; }
.image-swiper .z-xxl1-f3:nth-child(2) .z-xxl1-f4 {
width: 4.46rem;
bottom: 1rem; }
.image-swiper .z-xxl1-f5 {
font-size: 0.36rem;
line-height: 0.36rem;
color: #333333;
position: absolute;
top: 1.64rem; }
.image-swiper .z-xxl1-f3:nth-child(odd) .z-xxl1-f5 {
left: calc(50% + 0.6rem); }
.image-swiper .z-xxl1-f3:nth-child(even) .z-xxl1-f5 {
left: 0.24rem; }
.image-swiper .z-xxl1-f3:nth-child(1) .z-xxl1-f5 {
color: #fff; }
.image-swiper .z-xxl1-f6 {
font-size: 0.22rem;
line-height: 0.36rem;
color: #333;
position: absolute;
top: 2.36rem;
width: 3rem; }
.image-swiper .z-xxl1-f3:nth-child(odd) .z-xxl1-f6 {
left: calc(50% + 0.6rem); }
.image-swiper .z-xxl1-f3:nth-child(even) .z-xxl1-f6 {
left: 0.24rem; }
.image-swiper .z-xxl1-f3:nth-child(1) .z-xxl1-f6 {
color: #fff; }
.image-swiper .z-xxl1-f7 {
height: 0.78rem;
position: absolute;
top: 3.24rem; }
.image-swiper .z-xxl1-f3:nth-child(odd) .z-xxl1-f7 {
left: calc(50% + 0.6rem); }
.image-swiper .z-xxl1-f3:nth-child(even) .z-xxl1-f7 {
left: 0.24rem; }
.image-swiper .z-xxl1-f7 img {
height: 100%; }
.image-swiper .z-xxl1-g1 {
width: 100%; }
.image-swiper .z-xxl1-g2 {
width: 100%;
font-size: 0.38rem;
line-height: 0.38rem;
color: #333333;
text-align: center;
padding-top: 0.66rem;
padding-bottom: 0.66rem; }
.image-swiper .z-xxl1-g3 {
width: calc(100% - 0.48rem);
margin: 0 auto; }
.image-swiper .z-xxl1-g4 {
width: 100%;
height: 3.85rem;
position: relative;
border: 0;
border-radius: 0.2rem; }
.image-swiper .z-xxl1-g4:nth-child(1) {
margin-bottom: 0.3rem;
background: -webkit-linear-gradient(-30deg, #0073ef, #1684ff, #00a6ff);
background: -o-linear-gradient(-30deg, #0073ef, #1684ff, #00a6ff);
background: -moz-linear-gradient(-30deg, #0073ef, #1684ff, #00a6ff);
background: linear-gradient(-30deg, #0073ef, #1684ff, #00a6ff); }
.image-swiper .z-xxl1-g4:nth-child(2) {
background: -webkit-linear-gradient(-30deg, #564bb3, #6a47ca, #8b51d9);
background: -o-linear-gradient(-30deg, #564bb3, #6a47ca, #8b51d9);
background: -moz-linear-gradient(-30deg, #564bb3, #6a47ca, #8b51d9);
background: linear-gradient(-30deg, #564bb3, #6a47ca, #8b51d9); }
.image-swiper .z-xxl1-g4 > div:nth-child(1) {
width: 100%;
position: absolute;
top: 0.56rem;
left: 0;
font-size: 0.36rem;
line-height: 0.36rem;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-g4 > div:nth-child(2) {
width: 0.68rem;
height: 2px;
background: #fff;
position: absolute;
top: 1.1rem;
left: calc(50% - 0.34rem); }
.image-swiper .z-xxl1-g4 > div:nth-child(3) {
width: 100%;
position: absolute;
top: 1.5rem;
left: 0;
font-size: 0.24rem;
line-height: 0.24rem;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-g4 > div:nth-child(4) {
width: calc(100% - 2*0.5rem);
position: absolute;
top: 2.52rem;
left: 0.5rem;
font-size: 0.22rem;
line-height: 0.28rem;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-g4:nth-child(2) > div:nth-child(4) {
top: 1.84rem; }
.image-swiper .z-xxl1-g4:nth-child(2) > div:nth-child(4) > div {
font-size: 0.22rem;
line-height: 0.32rem;
color: #fff;
position: relative;
text-align: left; }
.image-swiper .z-xxl1-g4:nth-child(2) > div:nth-child(4) > div:nth-child(1) {
width: 2.9rem;
float: left; }
.image-swiper .z-xxl1-g4:nth-child(2) > div:nth-child(4) > div:nth-child(2) {
width: 2.5rem;
float: right; }
.image-swiper .z-xxl1-g4:nth-child(2) > div:nth-child(4) > div > div {
font-size: 0.28rem;
line-height: 0.28rem;
color: #fff;
font-family: "din";
position: absolute;
top: 0;
left: -0.28rem; }
.image-swiper .z-xxl1-h1 {
width: 100%; }
.image-swiper .z-xxl1-h2 {
width: 100%;
font-size: 0.38rem;
line-height: 0.38rem;
color: #333333;
text-align: center;
padding-top: 0.66rem;
padding-bottom: 0.66rem; }
.image-swiper .z-xxl1-h3 {
width: 100%;
height: 9.04rem;
position: relative;
overflow: hidden;
background: #262731; }
.image-swiper .z-xxl1-h4 {
width: 100%;
position: absolute;
top: 0.7rem;
left: 0;
font-size: 0.24rem;
line-height: 0.24rem;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-h5 {
width: calc(100% - 0.48rem);
position: absolute;
top: 1.76rem;
left: 0.24rem;
height: calc(100% - 1.76rem); }
.image-swiper .xxl1 {
width: 100% !important;
height: 6.2rem;
position: absolute;
top: 0;
left: 0; }
.image-swiper .xxl1 .swiper-slide {
width: 100% !important;
height: 100%; }
.image-swiper .xxl1 .swiper-slide > img {
width: calc(100% - 0.4rem);
margin: 0 auto;
margin-bottom: 0.4rem; }
.image-swiper .xxl1 .swiper-slide > div {
font-size: 0.22rem;
line-height: 0.22rem;
color: #fff;
text-align: center; }
.image-swiper .xxl2 {
width: 100%;
bottom: 0.52rem !important; }
.image-swiper .xxl2 .swiper-pagination-bullet {
width: 0.15rem;
height: 0.15rem;
border: 0;
border-radius: 50%;
background: #fff;
opacity: 1;
margin: 0 0.1rem;
transition: 0.5s; }
.image-swiper .xxl2 .swiper-pagination-bullet-active {
background: -webkit-linear-gradient(-30deg, #7841ff, #6257ff, #088dff);
background: -o-linear-gradient(-30deg, #7841ff, #6257ff, #088dff);
background: -moz-linear-gradient(-30deg, #7841ff, #6257ff, #088dff);
background: linear-gradient(-30deg, #7841ff, #6257ff, #088dff);
transition: 0.5s; }
.image-swiper .z-xxl1-i1 {
width: 100%; }
.image-swiper .z-xxl1-i2 {
width: 100%;
font-size: 0.38rem;
line-height: 0.38rem;
color: #333333;
text-align: center;
padding-top: 0.66rem;
padding-bottom: 0.66rem; }
.image-swiper .z-xxl1-i3 {
width: 100%;
height: 5.9rem;
position: relative; }
.image-swiper .z-xxl1-i4 {
font-size: 0.24rem;
line-height: 0.24rem;
color: #333333;
position: relative;
width: 100%;
text-align: center;
margin-top: -0.24rem;
margin-bottom: 0.56rem; }
.image-swiper .z-xxl1-i5 {
width: calc(100% - 2*1.02rem);
position: relative;
margin: 0 auto; }
.image-swiper .z-xxl1-i6 {
width: 100%;
height: 0.7rem;
border: 1px solid #d8dbdd;
border-radius: 0.04rem;
box-sizing: border-box;
position: relative;
margin-bottom: 0.28rem; }
.image-swiper .z-xxl1-i6:last-child {
width: 100%;
border: 0;
background: #3b7afb; }
.image-swiper .z-xxl1-i6 input {
width: calc(100% - 2*0.25rem);
height: 0.66rem;
border: 0;
outline: none;
display: block;
background: none;
font-size: 0.26rem;
line-height: 0.66rem;
color: #7f7f7f;
position: absolute;
top: 0;
left: 0.25rem; }
.image-swiper .z-xxl1-i6:last-child div {
position: relative;
width: 100%;
font-size: 0.24rem;
line-height: 0.7rem;
color: #fff;
text-align: center; }
.image-swiper .z-xxl1-i6:last-child input {
width: 100%;
left: 0;
opacity: 0;
cursor: pointer; } }
@media only screen and (min-width: 1500px) {
.image-swiper .z-extra1-a1 {
width: 100%;
height: 700px;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-a1 img {
width: 1920px;
position: absolute;
top: 0;
left: calc(50% - 960px); }
.image-swiper .z-extra1-a1 img:nth-child(1) {
display: block; }
.image-swiper .z-extra1-a1 img:nth-child(2) {
display: none; }
.image-swiper .z-extra1-b1 {
width: 100%;
height: 200px;
position: relative; }
.image-swiper .z-extra1-b2 {
font-size: 36px;
line-height: 50px;
color: #fff;
text-align: center;
position: absolute;
top: 52px;
left: calc(50% - 105px);
width: 50px;
height: 50px;
background: #4581fb;
border: 0;
border-radius: 4px; }
.image-swiper .z-extra1-b3 {
font-size: 36px;
line-height: 36px;
color: #333333;
position: absolute;
top: 60px;
left: calc(50% - 44px); }
.image-swiper .z-extra1-b4 {
font-size: 16px;
line-height: 16px;
color: #333333;
text-align: center;
width: 100%;
position: absolute;
top: 124px;
left: 0; }
.image-swiper .z-extra1-c1 {
width: 100%;
height: 680px;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-c1 > img {
width: 1920px;
position: absolute;
top: 0;
left: calc(50% - 960px); }
.image-swiper .z-extra1-c1 > img:nth-child(1) {
display: block; }
.image-swiper .z-extra1-c1 > img:nth-child(2) {
display: none; }
.image-swiper .z-extra1-c2 {
width: 790px;
position: absolute;
top: 120px;
right: calc(50% - 674px); }
.image-swiper .z-extra1-c3 {
width: 600px;
position: absolute;
top: 356px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-c4 {
font-size: 16px;
line-height: 16px;
color: #e14343;
position: absolute;
top: 480px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-c5 {
width: 220px;
height: 10px;
border: 0;
border-radius: 5px;
background: rgba(70, 131, 255, 0.4);
position: absolute;
top: 220px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-c6 {
font-size: 16px;
line-height: 48px;
color: #fff;
width: 466px;
position: absolute;
top: 190px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-c6 span {
font-size: 24px; }
.image-swiper .z-extra1-d1 {
width: 1200px;
height: 650px;
position: relative;
margin: 0 auto;
display: flex;
justify-content: space-between;
padding-top: 100px;
box-sizing: border-box; }
.image-swiper .z-extra1-d2 {
width: 340px; }
.image-swiper .z-extra1-d3 {
width: 180px;
border: 0;
border-radius: 50%;
margin: 0 auto; }
.image-swiper .z-extra1-d4 {
width: 1px;
height: 45px;
margin: 0 auto; }
.image-swiper .z-extra1-d2:nth-child(1) .z-extra1-d4 {
background: #4581fb; }
.image-swiper .z-extra1-d2:nth-child(2) .z-extra1-d4 {
background: #33be33; }
.image-swiper .z-extra1-d2:nth-child(3) .z-extra1-d4 {
background: #efbc31; }
.image-swiper .z-extra1-d5 {
width: 100%;
height: 225px;
border-radius: 10px;
box-sizing: border-box;
overflow: hidden;
position: relative; }
.image-swiper .z-extra1-d2:nth-child(1) .z-extra1-d5 {
background: #dae6fe;
border: 1px solid #4581fb; }
.image-swiper .z-extra1-d2:nth-child(2) .z-extra1-d5 {
background: #d6f2d6;
border: 1px solid #33be33; }
.image-swiper .z-extra1-d2:nth-child(3) .z-extra1-d5 {
background: #fcf2d6;
border: 1px solid #efbc31; }
.image-swiper .z-extra1-d5 > div:nth-child(1) {
font-size: 24px;
line-height: 24px;
text-align: center;
position: absolute;
top: 36px;
left: 0;
width: 100%;
font-weight: bold; }
.image-swiper .z-extra1-d5 > div:nth-child(2) {
width: 50px;
height: 2px;
position: absolute;
top: 84px;
left: calc(50% - 25px); }
.image-swiper .z-extra1-d5 > div:nth-child(3) {
font-size: 16px;
line-height: 28px;
color: #666666;
text-align: center;
position: absolute;
top: 114px;
left: 24px;
width: calc(100% - 2*24px); }
.image-swiper .z-extra1-d2:nth-child(1) .z-extra1-d5 > div:nth-child(1) {
color: #4581fb; }
.image-swiper .z-extra1-d2:nth-child(2) .z-extra1-d5 > div:nth-child(1) {
color: #33be33; }
.image-swiper .z-extra1-d2:nth-child(3) .z-extra1-d5 > div:nth-child(1) {
color: #efbc31; }
.image-swiper .z-extra1-d2:nth-child(1) .z-extra1-d5 > div:nth-child(2) {
background: #4581fb; }
.image-swiper .z-extra1-d2:nth-child(2) .z-extra1-d5 > div:nth-child(2) {
background: #33be33; }
.image-swiper .z-extra1-d2:nth-child(3) .z-extra1-d5 > div:nth-child(2) {
background: #efbc31; }
.image-swiper .z-extra1-e1 {
width: 100%;
height: 560px;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-e1 > img {
width: 1920px;
position: absolute;
top: 0;
left: calc(50% - 960px); }
.image-swiper .z-extra1-e1 > img:nth-child(1) {
display: block; }
.image-swiper .z-extra1-e1 > img:nth-child(2) {
display: none; }
.image-swiper .z-extra1-e2 {
width: 362px;
position: absolute;
top: 84px;
left: calc(50% - 362px/2); }
.image-swiper .z-extra1-e2 div {
font-size: 36px;
line-height: 64px;
color: #fff;
text-align: center;
font-weight: bold;
position: absolute;
top: calc(50% - 64px);
left: calc(50% - 250px/2);
width: 250px; }
.image-swiper .z-extra1-e3 {
font-size: 16px;
line-height: 34px;
color: #fff;
padding: 0 20px;
background: rgba(255, 255, 255, 0.2);
position: absolute; }
.image-swiper .z-extra1-e3:nth-child(1) {
top: 112px;
left: calc(50% - 596px); }
.image-swiper .z-extra1-e3:nth-child(2) {
top: 112px;
right: calc(50% - 682px); }
.image-swiper .z-extra1-e3:nth-child(3) {
top: 488px;
right: calc(50% - 300px); }
.image-swiper .z-extra1-e3 > div {
position: absolute;
top: 44px;
left: 0;
width: 100%; }
.image-swiper .z-extra1-e3 > div > div:nth-child(1) {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.6);
position: relative; }
.image-swiper .z-extra1-e3 > div > div:nth-child(2) {
width: 90px;
height: 1px;
background: rgba(255, 255, 255, 0.6);
position: absolute; }
.image-swiper .z-extra1-e3:nth-child(1) > div > div:nth-child(2) {
top: 0;
left: 100%;
transform: rotate(60deg);
transform-origin: 0 0; }
.image-swiper .z-extra1-e3:nth-child(2) > div > div:nth-child(2) {
top: 0;
right: 100%;
transform: rotate(-60deg);
transform-origin: 100% 0; }
.image-swiper .z-extra1-e3:nth-child(3) > div > div:nth-child(2) {
bottom: 0;
right: 100%;
transform: rotate(60deg);
transform-origin: 100% 0; }
.image-swiper .z-extra1-f1 {
width: 100%;
height: 500px;
background: #f5f5f5;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-f2 {
width: 652px;
position: absolute;
bottom: 0;
right: calc(50% - 600px); }
.image-swiper .z-extra1-f3 {
font-size: 24px;
line-height: 40px;
color: #f5f5f5;
padding: 0 10px;
border: 0;
border-radius: 20px;
background: #4581fb;
position: absolute;
top: 92px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-f3 > div {
width: 100%;
position: absolute;
top: 45px;
left: 0;
height: 5px; }
.image-swiper .z-extra1-f3 > div > img {
width: 125px;
position: absolute;
bottom: 0;
right: -5px; }
.image-swiper .z-extra1-f3 > div > div {
width: 50%;
height: 100%;
border: 0;
border-radius: 3px;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-f4 {
width: 470px;
font-size: 16px;
line-height: 48px;
color: #333333;
position: absolute;
top: 156px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-f5 {
width: 68px;
position: absolute;
top: 336px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-g1 {
width: 100%;
height: 1162px;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-g2 {
width: 1862px;
position: absolute;
top: 252px;
left: calc(50% - 1862px/2); }
.image-swiper .z-extra1-g3 {
font-size: 24px;
line-height: 40px;
color: #f5f5f5;
padding: 0 10px;
border: 0;
border-radius: 20px;
background: #4581fb;
position: absolute;
top: 72px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-g3 > div {
width: 100%;
position: absolute;
top: 45px;
left: 0;
height: 5px; }
.image-swiper .z-extra1-g3 > div > img {
width: 125px;
position: absolute;
bottom: 0;
right: -5px; }
.image-swiper .z-extra1-g3 > div > div {
width: 50%;
height: 100%;
border: 0;
border-radius: 3px;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-g4 {
width: 126px;
position: absolute; }
.image-swiper .z-extra1-g4 div {
font-size: 24px;
line-height: 24px;
color: #fff;
text-align: center;
position: absolute;
top: 56px;
left: 0;
width: 100%; }
.image-swiper .z-extra1-g4:nth-child(1) {
top: 255px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-g4:nth-child(2) {
top: 557px;
left: calc(50% - 570px); }
.image-swiper .z-extra1-g4:nth-child(3) {
top: 197px;
left: calc(50% - 25px); }
.image-swiper .z-extra1-g4:nth-child(4) {
top: 522px;
left: calc(50% - 89px); }
.image-swiper .z-extra1-g4:nth-child(5) {
top: 245px;
right: calc(50% - 600px); }
.image-swiper .z-extra1-g4:nth-child(6) {
top: 760px;
right: calc(50% - 552px); }
.image-swiper .z-extra1-h1 {
width: 100%;
height: 515px;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-h1 > img {
width: 1920px;
position: absolute;
top: 0;
left: calc(50% - 960px); }
.image-swiper .z-extra1-h1 > img:nth-child(1) {
display: block; }
.image-swiper .z-extra1-h1 > img:nth-child(2) {
display: none; }
.image-swiper .z-extra1-h2 {
font-size: 24px;
line-height: 40px;
color: #f5f5f5;
padding: 0 10px;
border: 0;
border-radius: 20px;
background: #4581fb;
position: absolute;
top: 72px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-h2 > div {
width: 100%;
position: absolute;
top: 45px;
left: 0;
height: 5px; }
.image-swiper .z-extra1-h2 > div > img {
width: 125px;
position: absolute;
bottom: 0;
right: -5px; }
.image-swiper .z-extra1-h2 > div > div {
width: 50%;
height: 100%;
border: 0;
border-radius: 3px;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-h3 {
width: 170px;
position: absolute; }
.image-swiper .z-extra1-h3:nth-child(1) {
top: 222px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-h3:nth-child(2) {
top: 172px;
left: calc(50% - 256px); }
.image-swiper .z-extra1-h3:nth-child(3) {
top: 200px;
right: calc(50% - 257px); }
.image-swiper .z-extra1-h3:nth-child(4) {
top: 180px;
right: calc(50% - 600px); }
.image-swiper .z-extra1-h3 img {
margin-bottom: 30px; }
.image-swiper .z-extra1-h3 div {
font-size: 16px;
line-height: 16px;
color: #fff;
width: 100%;
text-align: center; }
.image-swiper .z-extra1-i1 {
width: 100%;
height: 628px;
position: relative;
background: #f5f5f5;
overflow: hidden; }
.image-swiper .z-extra1-i2 {
font-size: 24px;
line-height: 40px;
color: #f5f5f5;
padding: 0 10px;
border: 0;
border-radius: 20px;
background: #4581fb;
position: absolute;
top: 70px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-i2 > div {
width: 100%;
position: absolute;
top: 45px;
left: 0;
height: 5px; }
.image-swiper .z-extra1-i2 > div > img {
width: 125px;
position: absolute;
bottom: 0;
right: -5px; }
.image-swiper .z-extra1-i2 > div > div {
width: 50%;
height: 100%;
border: 0;
border-radius: 3px;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-i3 {
width: 1200px;
position: absolute;
top: 190px;
left: calc(50% - 600px);
display: flex;
justify-content: space-between; }
.image-swiper .z-extra1-i4 {
width: 280px;
height: 350px;
position: relative;
border: 0;
border-radius: 20px;
overflow: hidden;
background: #fff; }
.image-swiper .z-extra1-i5 {
width: 100%;
height: 188px;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-i6 {
width: 100px;
height: 100px;
border: 0;
border-radius: 50%;
background: #fff;
position: absolute;
top: 60px;
left: calc(50% - 50px);
font-size: 24px;
line-height: 100px;
text-align: center; }
.image-swiper .z-extra1-i4:nth-child(1) .z-extra1-i6 {
color: #2ac6f7; }
.image-swiper .z-extra1-i4:nth-child(2) .z-extra1-i6 {
color: #a47cfe; }
.image-swiper .z-extra1-i4:nth-child(3) .z-extra1-i6 {
color: #f39677; }
.image-swiper .z-extra1-i4:nth-child(4) .z-extra1-i6 {
color: #e25074; }
.image-swiper .z-extra1-i7 {
width: calc(100% - 2*32px);
position: absolute;
top: 225px;
left: 32px;
font-size: 16px;
line-height: 28px;
color: #333333;
text-align: center; }
.image-swiper .z-extra1-j1 {
width: 100%;
height: 500px;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-j1 > img {
width: 1920px;
position: absolute;
top: 0;
left: calc(50% - 960px); }
.image-swiper .z-extra1-j1 > img:nth-child(1) {
display: block; }
.image-swiper .z-extra1-j1 > img:nth-child(2) {
display: none; }
.image-swiper .z-extra1-j2 {
font-size: 24px;
line-height: 40px;
color: #f5f5f5;
padding: 0 10px;
border: 0;
border-radius: 20px;
background: #4581fb;
position: absolute;
top: 90px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-j2 > div {
width: 100%;
position: absolute;
top: 45px;
left: 0;
height: 5px; }
.image-swiper .z-extra1-j2 > div > img {
width: 125px;
position: absolute;
bottom: 0;
right: -5px; }
.image-swiper .z-extra1-j2 > div > div {
width: 50%;
height: 100%;
border: 0;
border-radius: 3px;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-j3 {
width: 326px;
font-size: 16px;
line-height: 48px;
color: #fff;
position: absolute;
top: 152px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-j4 {
width: 68px;
position: absolute;
top: 304px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-j5 {
width: 985px;
position: absolute;
top: 50px;
right: calc(50% - 750px); }
.image-swiper .z-extra1-j5 > img:nth-child(1) {
display: block; }
.image-swiper .z-extra1-j5 > img:nth-child(2) {
display: none; }
.image-swiper .z-extra1-k1 {
width: 100%;
height: 1024px;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-k2 {
font-size: 24px;
line-height: 40px;
color: #f5f5f5;
padding: 0 10px;
border: 0;
border-radius: 20px;
background: #4581fb;
position: absolute;
top: 70px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-k2 > div {
width: 100%;
position: absolute;
top: 45px;
left: 0;
height: 5px; }
.image-swiper .z-extra1-k2 > div > img {
width: 125px;
position: absolute;
bottom: 0;
right: -5px; }
.image-swiper .z-extra1-k2 > div > div {
width: 80%;
height: 100%;
border: 0;
border-radius: 3px;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-k3 {
width: 450px;
position: absolute;
top: 212px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-k4 {
width: 100%;
height: 340px;
border: 0;
border-radius: 20px;
margin-bottom: 50px;
position: relative; }
.image-swiper .z-extra1-k4:nth-child(1) {
background: -webkit-linear-gradient(-67deg, #38a0ff, #0173ef);
background: -o-linear-gradient(-67deg, #38a0ff, #0173ef);
background: -moz-linear-gradient(-67deg, #38a0ff, #0173ef);
background: linear-gradient(-67deg, #38a0ff, #0173ef); }
.image-swiper .z-extra1-k4:nth-child(2) {
background: -webkit-linear-gradient(-67deg, #9944fc, #7123f3);
background: -o-linear-gradient(-67deg, #9944fc, #7123f3);
background: -moz-linear-gradient(-67deg, #9944fc, #7123f3);
background: linear-gradient(-67deg, #9944fc, #7123f3); }
.image-swiper .z-extra1-k4 > div:nth-child(1) {
font-size: 24px;
line-height: 24px;
color: #fff;
text-align: center;
position: absolute;
top: 72px;
left: 0;
width: 100%; }
.image-swiper .z-extra1-k4 > div:nth-child(2) {
font-size: 16px;
line-height: 16px;
color: #fff;
text-align: center;
position: absolute;
top: 114px;
left: 0;
width: 100%; }
.image-swiper .z-extra1-k4 > div:nth-child(3) {
width: 100px;
height: 1px;
position: absolute;
top: 150px;
left: calc(50% - 50px);
background: #fff; }
.image-swiper .z-extra1-k4 > div:nth-child(4) {
font-size: 16px;
line-height: 28px;
color: #fff;
text-align: center;
position: absolute;
top: 190px;
left: 4%;
width: 92%; }
.image-swiper .z-extra1-k5 {
width: 576px;
height: 576px;
position: absolute;
top: 310px;
right: calc(50% - 560px);
border: 2px solid #596aff;
border-radius: 50%;
box-sizing: border-box; }
.image-swiper .z-extra1-k6 {
width: 100%;
font-size: 24px;
line-height: 24px;
color: #333333;
text-align: center;
position: absolute;
top: calc(50% - 24px/2);
left: 0; }
.image-swiper .z-extra1-k7 {
width: 250px;
height: 250px;
border: 0;
border-radius: 50%;
overflow: hidden;
position: absolute; }
.image-swiper .z-extra1-k7:nth-child(1) {
top: 80px;
left: -92px; }
.image-swiper .z-extra1-k7:nth-child(2) {
top: 376px;
left: 8px; }
.image-swiper .z-extra1-k7:nth-child(3) {
top: 376px;
right: 8px; }
.image-swiper .z-extra1-k7:nth-child(4) {
top: 80px;
right: -92px; }
.image-swiper .z-extra1-k7:nth-child(5) {
top: -102px;
left: calc(50% - 250px/2); }
.image-swiper .z-extra1-k7 img {
width: 100%;
height: 100%; }
.image-swiper .z-extra1-k7 div {
width: 100%;
height: 70px;
position: absolute;
bottom: 0;
left: 0;
background: rgba(86, 103, 255, 0.7);
font-size: 16px;
line-height: 70px;
color: #fff;
text-align: center; }
.image-swiper .z-extra1-m1 {
width: 100%;
height: 680px;
position: relative;
background: #f5f5f5;
overflow: hidden; }
.image-swiper .z-extra1-m2 {
font-size: 24px;
line-height: 40px;
color: #f5f5f5;
padding: 0 10px;
border: 0;
border-radius: 20px;
background: #4581fb;
position: absolute;
top: 70px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-m2 > div {
width: 100%;
position: absolute;
top: 45px;
left: 0;
height: 5px; }
.image-swiper .z-extra1-m2 > div > img {
width: 125px;
position: absolute;
bottom: 0;
right: -5px; }
.image-swiper .z-extra1-m2 > div > div {
width: 50%;
height: 100%;
border: 0;
border-radius: 3px;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-m3 {
width: 1200px;
position: absolute;
top: 188px;
left: calc(50% - 600px);
display: flex;
justify-content: space-between; }
.image-swiper .z-extra1-m4 {
width: 280px;
height: 400px;
background: #fff;
border-radius: 20px;
border: 0;
overflow: hidden;
position: relative; }
.image-swiper .z-extra1-m5 {
width: 120px;
height: 120px;
border: 0;
border-radius: 50%;
position: absolute;
top: 50px;
left: calc(50% - 120px/2);
overflow: hidden; }
.image-swiper .z-extra1-m5 img {
width: 100%;
height: 100%; }
.image-swiper .z-extra1-m6 {
width: 100%;
font-size: 24px;
line-height: 24px;
color: #000000;
text-align: center;
position: absolute;
top: 225px;
left: 0; }
.image-swiper .z-extra1-m7 {
width: calc(100% - 20px*2);
font-size: 14px;
line-height: 24px;
color: #000000;
text-align: center;
position: absolute;
top: 260px;
left: 20px; }
.image-swiper .z-extra1-n1 {
width: 100%;
height: 540px;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-n1 > img {
width: 1920px;
position: absolute;
top: 0;
left: calc(50% - 960px); }
.image-swiper .z-extra1-n1 > img:nth-child(1) {
display: block; }
.image-swiper .z-extra1-n1 > img:nth-child(2) {
display: none; }
.image-swiper .z-extra1-n2 {
width: 596px;
position: absolute;
top: 46px;
right: calc(50% - 636px); }
.image-swiper .z-extra1-n3 {
font-size: 36px;
line-height: 36px;
color: #fff;
position: absolute;
top: 238px;
left: calc(50% - 600px); } }
@media only screen and (max-width: 1499px) and (min-width: 1300px) {
.image-swiper .z-extra1-a1 {
width: 100%;
height: 546px;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-a1 img {
width: 1500px;
position: absolute;
top: 0;
left: calc(50% - 750px); }
.image-swiper .z-extra1-a1 img:nth-child(1) {
display: block; }
.image-swiper .z-extra1-a1 img:nth-child(2) {
display: none; }
.image-swiper .z-extra1-b1 {
width: 100%;
height: 200px;
position: relative; }
.image-swiper .z-extra1-b2 {
font-size: 36px;
line-height: 50px;
color: #fff;
text-align: center;
position: absolute;
top: 52px;
left: calc(50% - 105px);
width: 50px;
height: 50px;
background: #4581fb;
border: 0;
border-radius: 4px; }
.image-swiper .z-extra1-b3 {
font-size: 36px;
line-height: 36px;
color: #333333;
position: absolute;
top: 60px;
left: calc(50% - 44px); }
.image-swiper .z-extra1-b4 {
font-size: 16px;
line-height: 16px;
color: #333333;
text-align: center;
width: 100%;
position: absolute;
top: 124px;
left: 0; }
.image-swiper .z-extra1-c1 {
width: 100%;
height: 680px;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-c1 > img {
width: 1920px;
position: absolute;
top: 0;
left: calc(50% - 960px); }
.image-swiper .z-extra1-c1 > img:nth-child(1) {
display: block; }
.image-swiper .z-extra1-c1 > img:nth-child(2) {
display: none; }
.image-swiper .z-extra1-c2 {
width: 790px;
position: absolute;
top: 120px;
right: calc(50% - 674px); }
.image-swiper .z-extra1-c3 {
width: 600px;
position: absolute;
top: 356px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-c4 {
font-size: 16px;
line-height: 16px;
color: #e14343;
position: absolute;
top: 480px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-c5 {
width: 220px;
height: 10px;
border: 0;
border-radius: 5px;
background: rgba(70, 131, 255, 0.4);
position: absolute;
top: 220px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-c6 {
font-size: 16px;
line-height: 48px;
color: #fff;
width: 466px;
position: absolute;
top: 190px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-c6 span {
font-size: 24px; }
.image-swiper .z-extra1-d1 {
width: 1200px;
height: 650px;
position: relative;
margin: 0 auto;
display: flex;
justify-content: space-between;
padding-top: 100px;
box-sizing: border-box; }
.image-swiper .z-extra1-d2 {
width: 340px; }
.image-swiper .z-extra1-d3 {
width: 180px;
border: 0;
border-radius: 50%;
margin: 0 auto; }
.image-swiper .z-extra1-d4 {
width: 1px;
height: 45px;
margin: 0 auto; }
.image-swiper .z-extra1-d2:nth-child(1) .z-extra1-d4 {
background: #4581fb; }
.image-swiper .z-extra1-d2:nth-child(2) .z-extra1-d4 {
background: #33be33; }
.image-swiper .z-extra1-d2:nth-child(3) .z-extra1-d4 {
background: #efbc31; }
.image-swiper .z-extra1-d5 {
width: 100%;
height: 225px;
border-radius: 10px;
box-sizing: border-box;
overflow: hidden;
position: relative; }
.image-swiper .z-extra1-d2:nth-child(1) .z-extra1-d5 {
background: #dae6fe;
border: 1px solid #4581fb; }
.image-swiper .z-extra1-d2:nth-child(2) .z-extra1-d5 {
background: #d6f2d6;
border: 1px solid #33be33; }
.image-swiper .z-extra1-d2:nth-child(3) .z-extra1-d5 {
background: #fcf2d6;
border: 1px solid #efbc31; }
.image-swiper .z-extra1-d5 > div:nth-child(1) {
font-size: 24px;
line-height: 24px;
text-align: center;
position: absolute;
top: 36px;
left: 0;
width: 100%;
font-weight: bold; }
.image-swiper .z-extra1-d5 > div:nth-child(2) {
width: 50px;
height: 2px;
position: absolute;
top: 84px;
left: calc(50% - 25px); }
.image-swiper .z-extra1-d5 > div:nth-child(3) {
font-size: 16px;
line-height: 28px;
color: #666666;
text-align: center;
position: absolute;
top: 114px;
left: 24px;
width: calc(100% - 2*24px); }
.image-swiper .z-extra1-d2:nth-child(1) .z-extra1-d5 > div:nth-child(1) {
color: #4581fb; }
.image-swiper .z-extra1-d2:nth-child(2) .z-extra1-d5 > div:nth-child(1) {
color: #33be33; }
.image-swiper .z-extra1-d2:nth-child(3) .z-extra1-d5 > div:nth-child(1) {
color: #efbc31; }
.image-swiper .z-extra1-d2:nth-child(1) .z-extra1-d5 > div:nth-child(2) {
background: #4581fb; }
.image-swiper .z-extra1-d2:nth-child(2) .z-extra1-d5 > div:nth-child(2) {
background: #33be33; }
.image-swiper .z-extra1-d2:nth-child(3) .z-extra1-d5 > div:nth-child(2) {
background: #efbc31; }
.image-swiper .z-extra1-e1 {
width: 100%;
height: 560px;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-e1 > img {
width: 1920px;
position: absolute;
top: 0;
left: calc(50% - 960px); }
.image-swiper .z-extra1-e1 > img:nth-child(1) {
display: block; }
.image-swiper .z-extra1-e1 > img:nth-child(2) {
display: none; }
.image-swiper .z-extra1-e2 {
width: 362px;
position: absolute;
top: 84px;
left: calc(50% - 362px/2); }
.image-swiper .z-extra1-e2 div {
font-size: 36px;
line-height: 64px;
color: #fff;
text-align: center;
font-weight: bold;
position: absolute;
top: calc(50% - 64px);
left: calc(50% - 250px/2);
width: 250px; }
.image-swiper .z-extra1-e3 {
font-size: 16px;
line-height: 34px;
color: #fff;
padding: 0 20px;
background: rgba(255, 255, 255, 0.2);
position: absolute; }
.image-swiper .z-extra1-e3:nth-child(1) {
top: 112px;
left: calc(50% - 596px); }
.image-swiper .z-extra1-e3:nth-child(2) {
top: 12px;
right: calc(50% - 630px); }
.image-swiper .z-extra1-e3:nth-child(3) {
top: 488px;
right: calc(50% - 300px); }
.image-swiper .z-extra1-e3 > div {
position: absolute;
top: 44px;
left: 0;
width: 100%; }
.image-swiper .z-extra1-e3 > div > div:nth-child(1) {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.6);
position: relative; }
.image-swiper .z-extra1-e3 > div > div:nth-child(2) {
width: 90px;
height: 1px;
background: rgba(255, 255, 255, 0.6);
position: absolute; }
.image-swiper .z-extra1-e3:nth-child(1) > div > div:nth-child(2) {
top: 0;
left: 100%;
transform: rotate(60deg);
transform-origin: 0 0; }
.image-swiper .z-extra1-e3:nth-child(2) > div > div:nth-child(2) {
top: 0;
right: 100%;
transform: rotate(-60deg);
transform-origin: 100% 0; }
.image-swiper .z-extra1-e3:nth-child(3) > div > div:nth-child(2) {
bottom: 0;
right: 100%;
transform: rotate(60deg);
transform-origin: 100% 0; }
.image-swiper .z-extra1-f1 {
width: 100%;
height: 500px;
background: #f5f5f5;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-f2 {
width: 652px;
position: absolute;
bottom: 0;
right: calc(50% - 600px); }
.image-swiper .z-extra1-f3 {
font-size: 24px;
line-height: 40px;
color: #f5f5f5;
padding: 0 10px;
border: 0;
border-radius: 20px;
background: #4581fb;
position: absolute;
top: 92px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-f3 > div {
width: 100%;
position: absolute;
top: 45px;
left: 0;
height: 5px; }
.image-swiper .z-extra1-f3 > div > img {
width: 125px;
position: absolute;
bottom: 0;
right: -5px; }
.image-swiper .z-extra1-f3 > div > div {
width: 50%;
height: 100%;
border: 0;
border-radius: 3px;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-f4 {
width: 470px;
font-size: 16px;
line-height: 48px;
color: #333333;
position: absolute;
top: 156px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-f5 {
width: 68px;
position: absolute;
top: 336px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-g1 {
width: 100%;
height: 960px;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-g2 {
width: 1500px;
position: absolute;
top: 252px;
left: calc(50% - 1500px/2); }
.image-swiper .z-extra1-g3 {
font-size: 24px;
line-height: 40px;
color: #f5f5f5;
padding: 0 10px;
border: 0;
border-radius: 20px;
background: #4581fb;
position: absolute;
top: 72px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-g3 > div {
width: 100%;
position: absolute;
top: 45px;
left: 0;
height: 5px; }
.image-swiper .z-extra1-g3 > div > img {
width: 125px;
position: absolute;
bottom: 0;
right: -5px; }
.image-swiper .z-extra1-g3 > div > div {
width: 50%;
height: 100%;
border: 0;
border-radius: 3px;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-g4 {
width: 126px;
position: absolute; }
.image-swiper .z-extra1-g4 div {
font-size: 24px;
line-height: 24px;
color: #fff;
text-align: center;
position: absolute;
top: 56px;
left: 0;
width: 100%; }
.image-swiper .z-extra1-g4:nth-child(1) {
top: 248px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-g4:nth-child(2) {
top: 557px;
left: calc(50% - 570px); }
.image-swiper .z-extra1-g4:nth-child(3) {
top: 174px;
left: calc(50% - 25px); }
.image-swiper .z-extra1-g4:nth-child(4) {
top: 500px;
left: calc(50% - 89px); }
.image-swiper .z-extra1-g4:nth-child(5) {
top: 248px;
right: calc(50% - 600px); }
.image-swiper .z-extra1-g4:nth-child(6) {
top: 720px;
right: calc(50% - 552px); }
.image-swiper .z-extra1-h1 {
width: 100%;
height: 515px;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-h1 > img {
width: 1920px;
position: absolute;
top: 0;
left: calc(50% - 960px); }
.image-swiper .z-extra1-h1 > img:nth-child(1) {
display: block; }
.image-swiper .z-extra1-h1 > img:nth-child(2) {
display: none; }
.image-swiper .z-extra1-h2 {
font-size: 24px;
line-height: 40px;
color: #f5f5f5;
padding: 0 10px;
border: 0;
border-radius: 20px;
background: #4581fb;
position: absolute;
top: 72px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-h2 > div {
width: 100%;
position: absolute;
top: 45px;
left: 0;
height: 5px; }
.image-swiper .z-extra1-h2 > div > img {
width: 125px;
position: absolute;
bottom: 0;
right: -5px; }
.image-swiper .z-extra1-h2 > div > div {
width: 50%;
height: 100%;
border: 0;
border-radius: 3px;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-h3 {
width: 170px;
position: absolute; }
.image-swiper .z-extra1-h3:nth-child(1) {
top: 222px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-h3:nth-child(2) {
top: 172px;
left: calc(50% - 256px); }
.image-swiper .z-extra1-h3:nth-child(3) {
top: 200px;
right: calc(50% - 257px); }
.image-swiper .z-extra1-h3:nth-child(4) {
top: 180px;
right: calc(50% - 600px); }
.image-swiper .z-extra1-h3 img {
margin-bottom: 30px; }
.image-swiper .z-extra1-h3 div {
font-size: 16px;
line-height: 16px;
color: #fff;
width: 100%;
text-align: center; }
.image-swiper .z-extra1-i1 {
width: 100%;
height: 628px;
position: relative;
background: #f5f5f5;
overflow: hidden; }
.image-swiper .z-extra1-i2 {
font-size: 24px;
line-height: 40px;
color: #f5f5f5;
padding: 0 10px;
border: 0;
border-radius: 20px;
background: #4581fb;
position: absolute;
top: 70px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-i2 > div {
width: 100%;
position: absolute;
top: 45px;
left: 0;
height: 5px; }
.image-swiper .z-extra1-i2 > div > img {
width: 125px;
position: absolute;
bottom: 0;
right: -5px; }
.image-swiper .z-extra1-i2 > div > div {
width: 50%;
height: 100%;
border: 0;
border-radius: 3px;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-i3 {
width: 1200px;
position: absolute;
top: 190px;
left: calc(50% - 600px);
display: flex;
justify-content: space-between; }
.image-swiper .z-extra1-i4 {
width: 280px;
height: 350px;
position: relative;
border: 0;
border-radius: 20px;
overflow: hidden;
background: #fff; }
.image-swiper .z-extra1-i5 {
width: 100%;
height: 188px;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-i6 {
width: 100px;
height: 100px;
border: 0;
border-radius: 50%;
background: #fff;
position: absolute;
top: 60px;
left: calc(50% - 50px);
font-size: 24px;
line-height: 100px;
text-align: center; }
.image-swiper .z-extra1-i4:nth-child(1) .z-extra1-i6 {
color: #2ac6f7; }
.image-swiper .z-extra1-i4:nth-child(2) .z-extra1-i6 {
color: #a47cfe; }
.image-swiper .z-extra1-i4:nth-child(3) .z-extra1-i6 {
color: #f39677; }
.image-swiper .z-extra1-i4:nth-child(4) .z-extra1-i6 {
color: #e25074; }
.image-swiper .z-extra1-i7 {
width: calc(100% - 2*32px);
position: absolute;
top: 225px;
left: 32px;
font-size: 16px;
line-height: 28px;
color: #333333;
text-align: center; }
.image-swiper .z-extra1-j1 {
width: 100%;
height: 500px;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-j1 > img {
width: 1920px;
position: absolute;
top: 0;
left: calc(50% - 960px); }
.image-swiper .z-extra1-j1 > img:nth-child(1) {
display: block; }
.image-swiper .z-extra1-j1 > img:nth-child(2) {
display: none; }
.image-swiper .z-extra1-j2 {
font-size: 24px;
line-height: 40px;
color: #f5f5f5;
padding: 0 10px;
border: 0;
border-radius: 20px;
background: #4581fb;
position: absolute;
top: 90px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-j2 > div {
width: 100%;
position: absolute;
top: 45px;
left: 0;
height: 5px; }
.image-swiper .z-extra1-j2 > div > img {
width: 125px;
position: absolute;
bottom: 0;
right: -5px; }
.image-swiper .z-extra1-j2 > div > div {
width: 50%;
height: 100%;
border: 0;
border-radius: 3px;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-j3 {
width: 326px;
font-size: 16px;
line-height: 48px;
color: #fff;
position: absolute;
top: 152px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-j4 {
width: 68px;
position: absolute;
top: 304px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-j5 {
width: 900px;
position: absolute;
top: 60px;
right: calc(50% - 640px); }
.image-swiper .z-extra1-j5 > img:nth-child(1) {
display: block; }
.image-swiper .z-extra1-j5 > img:nth-child(2) {
display: none; }
.image-swiper .z-extra1-k1 {
width: 100%;
height: 1024px;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-k2 {
font-size: 24px;
line-height: 40px;
color: #f5f5f5;
padding: 0 10px;
border: 0;
border-radius: 20px;
background: #4581fb;
position: absolute;
top: 70px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-k2 > div {
width: 100%;
position: absolute;
top: 45px;
left: 0;
height: 5px; }
.image-swiper .z-extra1-k2 > div > img {
width: 125px;
position: absolute;
bottom: 0;
right: -5px; }
.image-swiper .z-extra1-k2 > div > div {
width: 80%;
height: 100%;
border: 0;
border-radius: 3px;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-k3 {
width: 450px;
position: absolute;
top: 212px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-k4 {
width: 100%;
height: 340px;
border: 0;
border-radius: 20px;
margin-bottom: 50px;
position: relative; }
.image-swiper .z-extra1-k4:nth-child(1) {
background: -webkit-linear-gradient(-67deg, #38a0ff, #0173ef);
background: -o-linear-gradient(-67deg, #38a0ff, #0173ef);
background: -moz-linear-gradient(-67deg, #38a0ff, #0173ef);
background: linear-gradient(-67deg, #38a0ff, #0173ef); }
.image-swiper .z-extra1-k4:nth-child(2) {
background: -webkit-linear-gradient(-67deg, #9944fc, #7123f3);
background: -o-linear-gradient(-67deg, #9944fc, #7123f3);
background: -moz-linear-gradient(-67deg, #9944fc, #7123f3);
background: linear-gradient(-67deg, #9944fc, #7123f3); }
.image-swiper .z-extra1-k4 > div:nth-child(1) {
font-size: 24px;
line-height: 24px;
color: #fff;
text-align: center;
position: absolute;
top: 72px;
left: 0;
width: 100%; }
.image-swiper .z-extra1-k4 > div:nth-child(2) {
font-size: 16px;
line-height: 16px;
color: #fff;
text-align: center;
position: absolute;
top: 114px;
left: 0;
width: 100%; }
.image-swiper .z-extra1-k4 > div:nth-child(3) {
width: 100px;
height: 1px;
position: absolute;
top: 150px;
left: calc(50% - 50px);
background: #fff; }
.image-swiper .z-extra1-k4 > div:nth-child(4) {
font-size: 16px;
line-height: 28px;
color: #fff;
text-align: center;
position: absolute;
top: 190px;
left: 4%;
width: 92%; }
.image-swiper .z-extra1-k5 {
width: 576px;
height: 576px;
position: absolute;
top: 310px;
right: calc(50% - 540px);
border: 2px solid #596aff;
border-radius: 50%;
box-sizing: border-box; }
.image-swiper .z-extra1-k6 {
width: 100%;
font-size: 24px;
line-height: 24px;
color: #333333;
text-align: center;
position: absolute;
top: calc(50% - 24px/2);
left: 0; }
.image-swiper .z-extra1-k7 {
width: 250px;
height: 250px;
border: 0;
border-radius: 50%;
overflow: hidden;
position: absolute; }
.image-swiper .z-extra1-k7:nth-child(1) {
top: 80px;
left: -92px; }
.image-swiper .z-extra1-k7:nth-child(2) {
top: 376px;
left: 8px; }
.image-swiper .z-extra1-k7:nth-child(3) {
top: 376px;
right: 8px; }
.image-swiper .z-extra1-k7:nth-child(4) {
top: 80px;
right: -92px; }
.image-swiper .z-extra1-k7:nth-child(5) {
top: -102px;
left: calc(50% - 250px/2); }
.image-swiper .z-extra1-k7 img {
width: 100%;
height: 100%; }
.image-swiper .z-extra1-k7 div {
width: 100%;
height: 70px;
position: absolute;
bottom: 0;
left: 0;
background: rgba(86, 103, 255, 0.7);
font-size: 16px;
line-height: 70px;
color: #fff;
text-align: center; }
.image-swiper .z-extra1-m1 {
width: 100%;
height: 680px;
position: relative;
background: #f5f5f5;
overflow: hidden; }
.image-swiper .z-extra1-m2 {
font-size: 24px;
line-height: 40px;
color: #f5f5f5;
padding: 0 10px;
border: 0;
border-radius: 20px;
background: #4581fb;
position: absolute;
top: 70px;
left: calc(50% - 600px); }
.image-swiper .z-extra1-m2 > div {
width: 100%;
position: absolute;
top: 45px;
left: 0;
height: 5px; }
.image-swiper .z-extra1-m2 > div > img {
width: 125px;
position: absolute;
bottom: 0;
right: -5px; }
.image-swiper .z-extra1-m2 > div > div {
width: 50%;
height: 100%;
border: 0;
border-radius: 3px;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-m3 {
width: 1200px;
position: absolute;
top: 188px;
left: calc(50% - 600px);
display: flex;
justify-content: space-between; }
.image-swiper .z-extra1-m4 {
width: 280px;
height: 400px;
background: #fff;
border-radius: 20px;
border: 0;
overflow: hidden;
position: relative; }
.image-swiper .z-extra1-m5 {
width: 120px;
height: 120px;
border: 0;
border-radius: 50%;
position: absolute;
top: 50px;
left: calc(50% - 120px/2);
overflow: hidden; }
.image-swiper .z-extra1-m5 img {
width: 100%;
height: 100%; }
.image-swiper .z-extra1-m6 {
width: 100%;
font-size: 24px;
line-height: 24px;
color: #000000;
text-align: center;
position: absolute;
top: 225px;
left: 0; }
.image-swiper .z-extra1-m7 {
width: calc(100% - 20px*2);
font-size: 14px;
line-height: 24px;
color: #000000;
text-align: center;
position: absolute;
top: 260px;
left: 20px; }
.image-swiper .z-extra1-n1 {
width: 100%;
height: 540px;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-n1 > img {
width: 1920px;
position: absolute;
top: 0;
left: calc(50% - 960px); }
.image-swiper .z-extra1-n1 > img:nth-child(1) {
display: block; }
.image-swiper .z-extra1-n1 > img:nth-child(2) {
display: none; }
.image-swiper .z-extra1-n2 {
width: 596px;
position: absolute;
top: 46px;
right: calc(50% - 636px); }
.image-swiper .z-extra1-n3 {
font-size: 36px;
line-height: 36px;
color: #fff;
position: absolute;
top: 238px;
left: calc(50% - 600px); } }
@media only screen and (max-width: 1299px) and (min-width: 1024px) {
.image-swiper .z-extra1-a1 {
width: 100%;
height: 474px;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-a1 img {
width: 1300px;
position: absolute;
top: 0;
left: calc(50% - 650px); }
.image-swiper .z-extra1-a1 img:nth-child(1) {
display: block; }
.image-swiper .z-extra1-a1 img:nth-child(2) {
display: none; }
.image-swiper .z-extra1-b1 {
width: 100%;
height: 160px;
position: relative; }
.image-swiper .z-extra1-b2 {
font-size: 30px;
line-height: 44px;
color: #fff;
text-align: center;
position: absolute;
top: 36px;
left: calc(50% - 90px);
width: 44px;
height: 44px;
background: #4581fb;
border: 0;
border-radius: 4px; }
.image-swiper .z-extra1-b3 {
font-size: 30px;
line-height: 30px;
color: #333333;
position: absolute;
top: 40px;
left: calc(50% - 30px); }
.image-swiper .z-extra1-b4 {
font-size: 14px;
line-height: 14px;
color: #333333;
text-align: center;
width: 100%;
position: absolute;
top: 100px;
left: 0; }
.image-swiper .z-extra1-c1 {
width: 100%;
height: 460px;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-c1 > img {
width: 1300px;
position: absolute;
top: 0;
left: calc(50% - 650px); }
.image-swiper .z-extra1-c1 > img:nth-child(1) {
display: block; }
.image-swiper .z-extra1-c1 > img:nth-child(2) {
display: none; }
.image-swiper .z-extra1-c2 {
width: 600px;
position: absolute;
top: 80px;
right: calc(50% - 500px); }
.image-swiper .z-extra1-c3 {
width: 460px;
position: absolute;
top: 300px;
left: calc(50% - 460px); }
.image-swiper .z-extra1-c4 {
font-size: 14px;
line-height: 14px;
color: #e14343;
position: absolute;
top: 400px;
left: calc(50% - 460px); }
.image-swiper .z-extra1-c5 {
width: 180px;
height: 6px;
border: 0;
border-radius: 3px;
background: rgba(70, 131, 255, 0.4);
position: absolute;
top: 110px;
left: calc(50% - 460px); }
.image-swiper .z-extra1-c6 {
font-size: 14px;
line-height: 40px;
color: #fff;
width: 360px;
position: absolute;
top: 80px;
left: calc(50% - 460px); }
.image-swiper .z-extra1-c6 span {
font-size: 20px; }
.image-swiper .z-extra1-d1 {
width: 960px;
height: 420px;
position: relative;
margin: 0 auto;
display: flex;
justify-content: space-between;
padding-top: 40px;
box-sizing: border-box; }
.image-swiper .z-extra1-d2 {
width: 300px; }
.image-swiper .z-extra1-d3 {
width: 120px;
border: 0;
border-radius: 50%;
margin: 0 auto; }
.image-swiper .z-extra1-d4 {
width: 1px;
height: 30px;
margin: 0 auto; }
.image-swiper .z-extra1-d2:nth-child(1) .z-extra1-d4 {
background: #4581fb; }
.image-swiper .z-extra1-d2:nth-child(2) .z-extra1-d4 {
background: #33be33; }
.image-swiper .z-extra1-d2:nth-child(3) .z-extra1-d4 {
background: #efbc31; }
.image-swiper .z-extra1-d5 {
width: 100%;
height: 180px;
border-radius: 10px;
box-sizing: border-box;
overflow: hidden;
position: relative; }
.image-swiper .z-extra1-d2:nth-child(1) .z-extra1-d5 {
background: #dae6fe;
border: 1px solid #4581fb; }
.image-swiper .z-extra1-d2:nth-child(2) .z-extra1-d5 {
background: #d6f2d6;
border: 1px solid #33be33; }
.image-swiper .z-extra1-d2:nth-child(3) .z-extra1-d5 {
background: #fcf2d6;
border: 1px solid #efbc31; }
.image-swiper .z-extra1-d5 > div:nth-child(1) {
font-size: 20px;
line-height: 20px;
text-align: center;
position: absolute;
top: 24px;
left: 0;
width: 100%;
font-weight: bold; }
.image-swiper .z-extra1-d5 > div:nth-child(2) {
width: 50px;
height: 2px;
position: absolute;
top: 64px;
left: calc(50% - 25px); }
.image-swiper .z-extra1-d5 > div:nth-child(3) {
font-size: 14px;
line-height: 24px;
color: #666666;
text-align: center;
position: absolute;
top: 90px;
left: 16px;
width: calc(100% - 2*16px); }
.image-swiper .z-extra1-d2:nth-child(1) .z-extra1-d5 > div:nth-child(1) {
color: #4581fb; }
.image-swiper .z-extra1-d2:nth-child(2) .z-extra1-d5 > div:nth-child(1) {
color: #33be33; }
.image-swiper .z-extra1-d2:nth-child(3) .z-extra1-d5 > div:nth-child(1) {
color: #efbc31; }
.image-swiper .z-extra1-d2:nth-child(1) .z-extra1-d5 > div:nth-child(2) {
background: #4581fb; }
.image-swiper .z-extra1-d2:nth-child(2) .z-extra1-d5 > div:nth-child(2) {
background: #33be33; }
.image-swiper .z-extra1-d2:nth-child(3) .z-extra1-d5 > div:nth-child(2) {
background: #efbc31; }
.image-swiper .z-extra1-e1 {
width: 100%;
height: 378px;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-e1 > img {
width: 1300px;
position: absolute;
top: 0;
left: calc(50% - 650px); }
.image-swiper .z-extra1-e1 > img:nth-child(1) {
display: block; }
.image-swiper .z-extra1-e1 > img:nth-child(2) {
display: none; }
.image-swiper .z-extra1-e2 {
width: 260px;
position: absolute;
top: 60px;
left: calc(50% - 280px/2); }
.image-swiper .z-extra1-e2 div {
font-size: 30px;
line-height: 50px;
color: #fff;
text-align: center;
font-weight: bold;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 200px/2);
width: 200px; }
.image-swiper .z-extra1-e3 {
font-size: 14px;
line-height: 28px;
color: #fff;
padding: 0 10px;
background: rgba(255, 255, 255, 0.2);
position: absolute; }
.image-swiper .z-extra1-e3:nth-child(1) {
top: 80px;
left: calc(50% - 480px); }
.image-swiper .z-extra1-e3:nth-child(2) {
top: 12px;
right: calc(50% - 500px); }
.image-swiper .z-extra1-e3:nth-child(3) {
top: 300px;
right: calc(50% - 340px); }
.image-swiper .z-extra1-e3 > div {
position: absolute;
top: 44px;
left: 0;
width: 100%; }
.image-swiper .z-extra1-e3 > div > div:nth-child(1) {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.6);
position: relative; }
.image-swiper .z-extra1-e3 > div > div:nth-child(2) {
width: 50px;
height: 1px;
background: rgba(255, 255, 255, 0.6);
position: absolute; }
.image-swiper .z-extra1-e3:nth-child(1) > div > div:nth-child(2) {
top: 0;
left: 100%;
transform: rotate(60deg);
transform-origin: 0 0; }
.image-swiper .z-extra1-e3:nth-child(2) > div > div:nth-child(2) {
top: 0;
right: 100%;
transform: rotate(-60deg);
transform-origin: 100% 0; }
.image-swiper .z-extra1-e3:nth-child(3) > div > div:nth-child(2) {
bottom: 0;
right: 100%;
transform: rotate(60deg);
transform-origin: 100% 0; }
.image-swiper .z-extra1-f1 {
width: 100%;
height: 360px;
background: #f5f5f5;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-f2 {
width: 480px;
position: absolute;
bottom: 0;
right: calc(50% - 480px); }
.image-swiper .z-extra1-f3 {
font-size: 24px;
line-height: 40px;
color: #f5f5f5;
padding: 0 10px;
border: 0;
border-radius: 20px;
background: #4581fb;
position: absolute;
top: 40px;
left: calc(50% - 480px); }
.image-swiper .z-extra1-f3 > div {
width: 100%;
position: absolute;
top: 45px;
left: 0;
height: 5px; }
.image-swiper .z-extra1-f3 > div > img {
width: 125px;
position: absolute;
bottom: 0;
right: -5px; }
.image-swiper .z-extra1-f3 > div > div {
width: 50%;
height: 100%;
border: 0;
border-radius: 3px;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-f4 {
width: 400px;
font-size: 14px;
line-height: 36px;
color: #333333;
position: absolute;
top: 120px;
left: calc(50% - 480px); }
.image-swiper .z-extra1-f5 {
width: 60px;
position: absolute;
top: 250px;
left: calc(50% - 480px); }
.image-swiper .z-extra1-g1 {
width: 100%;
height: 620px;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-g2 {
width: 960px;
position: absolute;
top: 160px;
left: calc(50% - 960px/2); }
.image-swiper .z-extra1-g3 {
font-size: 24px;
line-height: 40px;
color: #f5f5f5;
padding: 0 10px;
border: 0;
border-radius: 20px;
background: #4581fb;
position: absolute;
top: 50px;
left: calc(50% - 480px); }
.image-swiper .z-extra1-g3 > div {
width: 100%;
position: absolute;
top: 45px;
left: 0;
height: 5px; }
.image-swiper .z-extra1-g3 > div > img {
width: 125px;
position: absolute;
bottom: 0;
right: -5px; }
.image-swiper .z-extra1-g3 > div > div {
width: 50%;
height: 100%;
border: 0;
border-radius: 3px;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-g4 {
width: 100px;
position: absolute; }
.image-swiper .z-extra1-g4 div {
font-size: 20px;
line-height: 20px;
color: #fff;
text-align: center;
position: absolute;
top: 44px;
left: 0;
width: 100%; }
.image-swiper .z-extra1-g4:nth-child(1) {
top: 170px;
left: calc(50% - 480px); }
.image-swiper .z-extra1-g4:nth-child(2) {
top: 420px;
left: calc(50% - 460px); }
.image-swiper .z-extra1-g4:nth-child(3) {
top: 84px;
left: calc(50% - 40px); }
.image-swiper .z-extra1-g4:nth-child(4) {
top: 300px;
left: calc(50% - 60px); }
.image-swiper .z-extra1-g4:nth-child(5) {
top: 170px;
right: calc(50% - 480px); }
.image-swiper .z-extra1-g4:nth-child(6) {
top: 400px;
right: calc(50% - 420px); }
.image-swiper .z-extra1-h1 {
width: 100%;
height: 350px;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-h1 > img {
width: 1300px;
position: absolute;
top: 0;
left: calc(50% - 650px); }
.image-swiper .z-extra1-h1 > img:nth-child(1) {
display: block; }
.image-swiper .z-extra1-h1 > img:nth-child(2) {
display: none; }
.image-swiper .z-extra1-h2 {
font-size: 24px;
line-height: 40px;
color: #f5f5f5;
padding: 0 10px;
border: 0;
border-radius: 20px;
background: #4581fb;
position: absolute;
top: 30px;
left: calc(50% - 480px); }
.image-swiper .z-extra1-h2 > div {
width: 100%;
position: absolute;
top: 45px;
left: 0;
height: 5px; }
.image-swiper .z-extra1-h2 > div > img {
width: 125px;
position: absolute;
bottom: 0;
right: -5px; }
.image-swiper .z-extra1-h2 > div > div {
width: 50%;
height: 100%;
border: 0;
border-radius: 3px;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-h3 {
width: 120px;
position: absolute; }
.image-swiper .z-extra1-h3:nth-child(1) {
top: 160px;
left: calc(50% - 420px); }
.image-swiper .z-extra1-h3:nth-child(2) {
top: 120px;
left: calc(50% - 180px); }
.image-swiper .z-extra1-h3:nth-child(3) {
top: 170px;
right: calc(50% - 180px); }
.image-swiper .z-extra1-h3:nth-child(4) {
top: 130px;
right: calc(50% - 420px); }
.image-swiper .z-extra1-h3 img {
margin-bottom: 20px; }
.image-swiper .z-extra1-h3 div {
font-size: 14px;
line-height: 14px;
color: #fff;
width: 100%;
text-align: center; }
.image-swiper .z-extra1-i1 {
width: 100%;
height: 440px;
position: relative;
background: #f5f5f5;
overflow: hidden; }
.image-swiper .z-extra1-i2 {
font-size: 24px;
line-height: 40px;
color: #f5f5f5;
padding: 0 10px;
border: 0;
border-radius: 20px;
background: #4581fb;
position: absolute;
top: 30px;
left: calc(50% - 480px); }
.image-swiper .z-extra1-i2 > div {
width: 100%;
position: absolute;
top: 45px;
left: 0;
height: 5px; }
.image-swiper .z-extra1-i2 > div > img {
width: 125px;
position: absolute;
bottom: 0;
right: -5px; }
.image-swiper .z-extra1-i2 > div > div {
width: 50%;
height: 100%;
border: 0;
border-radius: 3px;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-i3 {
width: 960px;
position: absolute;
top: 120px;
left: calc(50% - 480px);
display: flex;
justify-content: space-between; }
.image-swiper .z-extra1-i4 {
width: 220px;
height: 280px;
position: relative;
border: 0;
border-radius: 20px;
overflow: hidden;
background: #fff; }
.image-swiper .z-extra1-i5 {
width: 100%;
height: 140px;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-i6 {
width: 80px;
height: 80px;
border: 0;
border-radius: 50%;
background: #fff;
position: absolute;
top: 30px;
left: calc(50% - 40px);
font-size: 24px;
line-height: 80px;
text-align: center; }
.image-swiper .z-extra1-i4:nth-child(1) .z-extra1-i6 {
color: #2ac6f7; }
.image-swiper .z-extra1-i4:nth-child(2) .z-extra1-i6 {
color: #a47cfe; }
.image-swiper .z-extra1-i4:nth-child(3) .z-extra1-i6 {
color: #f39677; }
.image-swiper .z-extra1-i4:nth-child(4) .z-extra1-i6 {
color: #e25074; }
.image-swiper .z-extra1-i7 {
width: calc(100% - 2*20px);
position: absolute;
top: 160px;
left: 20px;
font-size: 14px;
line-height: 24px;
color: #333333;
text-align: center; }
.image-swiper .z-extra1-j1 {
width: 100%;
height: 340px;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-j1 > img {
width: 1300px;
position: absolute;
top: 0;
left: calc(50% - 650px); }
.image-swiper .z-extra1-j1 > img:nth-child(1) {
display: block; }
.image-swiper .z-extra1-j1 > img:nth-child(2) {
display: none; }
.image-swiper .z-extra1-j2 {
font-size: 24px;
line-height: 40px;
color: #f5f5f5;
padding: 0 10px;
border: 0;
border-radius: 20px;
background: #4581fb;
position: absolute;
top: 30px;
left: calc(50% - 480px); }
.image-swiper .z-extra1-j2 > div {
width: 100%;
position: absolute;
top: 45px;
left: 0;
height: 5px; }
.image-swiper .z-extra1-j2 > div > img {
width: 125px;
position: absolute;
bottom: 0;
right: -5px; }
.image-swiper .z-extra1-j2 > div > div {
width: 50%;
height: 100%;
border: 0;
border-radius: 3px;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-j3 {
width: 280px;
font-size: 14px;
line-height: 36px;
color: #fff;
position: absolute;
top: 100px;
left: calc(50% - 480px); }
.image-swiper .z-extra1-j4 {
width: 60px;
position: absolute;
top: 220px;
left: calc(50% - 480px); }
.image-swiper .z-extra1-j5 {
width: 640px;
position: absolute;
top: 36px;
right: calc(50% - 480px); }
.image-swiper .z-extra1-j5 > img:nth-child(1) {
display: block; }
.image-swiper .z-extra1-j5 > img:nth-child(2) {
display: none; }
.image-swiper .z-extra1-k1 {
width: 100%;
height: 710px;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-k2 {
font-size: 24px;
line-height: 40px;
color: #f5f5f5;
padding: 0 10px;
border: 0;
border-radius: 20px;
background: #4581fb;
position: absolute;
top: 30px;
left: calc(50% - 480px); }
.image-swiper .z-extra1-k2 > div {
width: 100%;
position: absolute;
top: 45px;
left: 0;
height: 5px; }
.image-swiper .z-extra1-k2 > div > img {
width: 125px;
position: absolute;
bottom: 0;
right: -5px; }
.image-swiper .z-extra1-k2 > div > div {
width: 80%;
height: 100%;
border: 0;
border-radius: 3px;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-k3 {
width: 360px;
position: absolute;
top: 120px;
left: calc(50% - 480px); }
.image-swiper .z-extra1-k4 {
width: 100%;
height: 260px;
border: 0;
border-radius: 20px;
margin-bottom: 30px;
position: relative; }
.image-swiper .z-extra1-k4:nth-child(1) {
background: -webkit-linear-gradient(-67deg, #38a0ff, #0173ef);
background: -o-linear-gradient(-67deg, #38a0ff, #0173ef);
background: -moz-linear-gradient(-67deg, #38a0ff, #0173ef);
background: linear-gradient(-67deg, #38a0ff, #0173ef); }
.image-swiper .z-extra1-k4:nth-child(2) {
background: -webkit-linear-gradient(-67deg, #9944fc, #7123f3);
background: -o-linear-gradient(-67deg, #9944fc, #7123f3);
background: -moz-linear-gradient(-67deg, #9944fc, #7123f3);
background: linear-gradient(-67deg, #9944fc, #7123f3); }
.image-swiper .z-extra1-k4 > div:nth-child(1) {
font-size: 20px;
line-height: 20px;
color: #fff;
text-align: center;
position: absolute;
top: 40px;
left: 0;
width: 100%; }
.image-swiper .z-extra1-k4 > div:nth-child(2) {
font-size: 14px;
line-height: 14px;
color: #fff;
text-align: center;
position: absolute;
top: 80px;
left: 0;
width: 100%; }
.image-swiper .z-extra1-k4 > div:nth-child(3) {
width: 80px;
height: 1px;
position: absolute;
top: 120px;
left: calc(50% - 40px);
background: #fff; }
.image-swiper .z-extra1-k4 > div:nth-child(4) {
font-size: 14px;
line-height: 24px;
color: #fff;
text-align: center;
position: absolute;
top: 140px;
left: 4%;
width: 92%; }
.image-swiper .z-extra1-k5 {
width: 440px;
height: 440px;
position: absolute;
top: 180px;
right: calc(50% - 420px);
border: 2px solid #596aff;
border-radius: 50%;
box-sizing: border-box; }
.image-swiper .z-extra1-k6 {
width: 100%;
font-size: 20px;
line-height: 20px;
color: #333333;
text-align: center;
position: absolute;
top: calc(50% - 20px/2);
left: 0; }
.image-swiper .z-extra1-k7 {
width: 180px;
height: 180px;
border: 0;
border-radius: 50%;
overflow: hidden;
position: absolute; }
.image-swiper .z-extra1-k7:nth-child(1) {
top: 60px;
left: -90px; }
.image-swiper .z-extra1-k7:nth-child(2) {
top: 310px;
left: -10px; }
.image-swiper .z-extra1-k7:nth-child(3) {
top: 310px;
right: -10px; }
.image-swiper .z-extra1-k7:nth-child(4) {
top: 60px;
right: -90px; }
.image-swiper .z-extra1-k7:nth-child(5) {
top: -102px;
left: calc(50% - 250px/2); }
.image-swiper .z-extra1-k7 img {
width: 100%;
height: 100%; }
.image-swiper .z-extra1-k7 div {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
background: rgba(86, 103, 255, 0.7);
font-size: 14px;
line-height: 50px;
color: #fff;
text-align: center; }
.image-swiper .z-extra1-m1 {
width: 100%;
height: 420px;
position: relative;
background: #f5f5f5;
overflow: hidden; }
.image-swiper .z-extra1-m2 {
font-size: 24px;
line-height: 40px;
color: #f5f5f5;
padding: 0 10px;
border: 0;
border-radius: 20px;
background: #4581fb;
position: absolute;
top: 30px;
left: calc(50% - 480px); }
.image-swiper .z-extra1-m2 > div {
width: 100%;
position: absolute;
top: 45px;
left: 0;
height: 5px; }
.image-swiper .z-extra1-m2 > div > img {
width: 125px;
position: absolute;
bottom: 0;
right: -5px; }
.image-swiper .z-extra1-m2 > div > div {
width: 50%;
height: 100%;
border: 0;
border-radius: 3px;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-m3 {
width: 960px;
position: absolute;
top: 110px;
left: calc(50% - 480px);
display: flex;
justify-content: space-between; }
.image-swiper .z-extra1-m4 {
width: 220px;
height: 280px;
background: #fff;
border-radius: 20px;
border: 0;
overflow: hidden;
position: relative; }
.image-swiper .z-extra1-m5 {
width: 90px;
height: 90px;
border: 0;
border-radius: 50%;
position: absolute;
top: 30px;
left: calc(50% - 90px/2);
overflow: hidden; }
.image-swiper .z-extra1-m5 img {
width: 100%;
height: 100%; }
.image-swiper .z-extra1-m6 {
width: 100%;
font-size: 20px;
line-height: 20px;
color: #000000;
text-align: center;
position: absolute;
top: 140px;
left: 0; }
.image-swiper .z-extra1-m7 {
width: calc(100% - 16px*2);
font-size: 14px;
line-height: 20px;
color: #000000;
text-align: center;
position: absolute;
top: 180px;
left: 16px; }
.image-swiper .z-extra1-n1 {
width: 100%;
height: 368px;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-n1 > img {
width: 1300px;
position: absolute;
top: 0;
left: calc(50% - 650px); }
.image-swiper .z-extra1-n1 > img:nth-child(1) {
display: block; }
.image-swiper .z-extra1-n1 > img:nth-child(2) {
display: none; }
.image-swiper .z-extra1-n2 {
width: 440px;
position: absolute;
top: 20px;
right: calc(50% - 480px); }
.image-swiper .z-extra1-n3 {
font-size: 30px;
line-height: 30px;
color: #fff;
position: absolute;
top: 170px;
left: calc(50% - 480px); } }
@media only screen and (max-width: 1023px) {
.image-swiper .z-extra1-a1 {
width: 100%;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-a1 img {
width: 100%;
position: relative; }
.image-swiper .z-extra1-a1 img:nth-child(1) {
display: none; }
.image-swiper .z-extra1-a1 img:nth-child(2) {
display: block; }
.image-swiper .z-extra1-b1 {
width: 100%;
height: 1.76rem;
position: relative; }
.image-swiper .z-extra1-b2 {
font-size: 0.4rem;
line-height: 0.6rem;
color: #fff;
text-align: center;
position: absolute;
top: 0.4rem;
left: calc(50% - 1.18rem);
width: 0.6rem;
height: 0.6rem;
background: #4581fb;
border: 0;
border-radius: 0.04rem; }
.image-swiper .z-extra1-b3 {
font-size: 0.4rem;
line-height: 0.4rem;
color: #333333;
position: absolute;
top: 0.52rem;
left: calc(50% - 0.48rem); }
.image-swiper .z-extra1-b4 {
font-size: 0.24rem;
line-height: 0.24rem;
color: #333333;
text-align: center;
width: 100%;
position: absolute;
top: 1.12rem;
left: 0; }
.image-swiper .z-extra1-c1 {
width: 100%;
position: relative;
overflow: hidden;
height: 6.4rem; }
.image-swiper .z-extra1-c1 > img {
width: 100%;
position: relative; }
.image-swiper .z-extra1-c1 > img:nth-child(1) {
display: none; }
.image-swiper .z-extra1-c1 > img:nth-child(2) {
display: block; }
.image-swiper .z-extra1-c2 {
width: 5.26rem;
position: absolute;
bottom: 0;
right: 0; }
.image-swiper .z-extra1-c3 {
width: 2.88rem;
position: absolute;
top: 3.85rem;
left: 0.24rem; }
.image-swiper .z-extra1-c4 {
font-size: 0.24rem;
line-height: 0.48rem;
color: #e14343;
position: absolute;
top: 4.66rem;
left: 0.24rem;
width: 2.44rem; }
.image-swiper .z-extra1-c5 {
width: 2.76rem;
height: 0.16rem;
border: 0;
border-radius: 0.02rem;
background: rgba(70, 131, 255, 0.4);
position: absolute;
top: 0.54rem;
left: 0.24rem; }
.image-swiper .z-extra1-c6 {
font-size: 0.28rem;
line-height: 0.48rem;
color: #fff;
width: calc(100% - 0.48rem);
position: absolute;
top: 0.3rem;
left: 0.24rem; }
.image-swiper .z-extra1-c6 span {
font-size: 0.28rem;
display: block; }
.image-swiper .z-extra1-d1 {
width: 100%;
position: relative;
margin: 0 auto;
padding-top: 0.4rem;
box-sizing: border-box; }
.image-swiper .z-extra1-d2 {
width: calc(100% - 0.48rem);
margin: 0 auto;
margin-bottom: 0.4rem;
position: relative; }
.image-swiper .z-extra1-d3 {
width: 1.2rem;
border: 0;
border-radius: 50%;
position: absolute;
top: calc(50% - 0.6rem);
left: 0; }
.image-swiper .z-extra1-d4 {
display: none; }
.image-swiper .z-extra1-d5 {
width: calc(100% - 1.4rem);
border-radius: 0.1rem;
box-sizing: border-box;
overflow: hidden;
position: relative;
float: right;
padding: 0.2rem 0.18rem; }
.image-swiper .z-extra1-d2:nth-child(1) .z-extra1-d5 {
background: #dae6fe;
border: 1px solid #4581fb; }
.image-swiper .z-extra1-d2:nth-child(2) .z-extra1-d5 {
background: #d6f2d6;
border: 1px solid #33be33; }
.image-swiper .z-extra1-d2:nth-child(3) .z-extra1-d5 {
background: #fcf2d6;
border: 1px solid #efbc31; }
.image-swiper .z-extra1-d5 > div:nth-child(1) {
font-size: 0.32rem;
line-height: 0.32rem;
position: relative;
font-weight: bold;
margin-bottom: 0.14rem; }
.image-swiper .z-extra1-d5 > div:nth-child(2) {
display: none; }
.image-swiper .z-extra1-d5 > div:nth-child(3) {
font-size: 0.28rem;
line-height: 0.42rem;
color: #666666;
position: relative; }
.image-swiper .z-extra1-d2:nth-child(1) .z-extra1-d5 > div:nth-child(1) {
color: #4581fb; }
.image-swiper .z-extra1-d2:nth-child(2) .z-extra1-d5 > div:nth-child(1) {
color: #33be33; }
.image-swiper .z-extra1-d2:nth-child(3) .z-extra1-d5 > div:nth-child(1) {
color: #efbc31; }
.image-swiper .z-extra1-e1 {
width: 100%;
height: 5.2rem;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-e1 > img {
width: 100%;
position: relative; }
.image-swiper .z-extra1-e1 > img:nth-child(1) {
display: none; }
.image-swiper .z-extra1-e1 > img:nth-child(2) {
display: block; }
.image-swiper .z-extra1-e2 {
width: 2.54rem;
position: absolute;
top: 0.75rem;
left: calc(50% - 2.54rem/2); }
.image-swiper .z-extra1-e2 div {
font-size: 0.28rem;
line-height: 0.56rem;
color: #fff;
text-align: center;
font-weight: bold;
position: absolute;
top: calc(50% - 0.56rem);
left: calc(50% - 2rem/2);
width: 2rem; }
.image-swiper .z-extra1-e3 {
font-size: 0.28rem;
line-height: 0.48rem;
color: #fff;
padding: 0.1rem;
background: rgba(255, 255, 255, 0.2);
position: absolute;
box-sizing: border-box; }
.image-swiper .z-extra1-e3:nth-child(1) {
top: 0.58rem;
left: 0.24rem;
width: 2.02rem; }
.image-swiper .z-extra1-e3:nth-child(2) {
top: 0.58rem;
right: 0.24rem;
width: 2.02rem; }
.image-swiper .z-extra1-e3:nth-child(3) {
top: 3.6rem;
right: calc(50% - 4.72rem/2);
max-width: 4.72rem; }
.image-swiper .z-extra1-e3 > div {
position: absolute;
top: calc(100% + 0.1rem);
left: 0;
width: 100%; }
.image-swiper .z-extra1-e3 > div > div:nth-child(1) {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.6);
position: relative; }
.image-swiper .z-extra1-e3 > div > div:nth-child(2) {
width: 0.36rem;
height: 1px;
background: rgba(255, 255, 255, 0.6);
position: absolute; }
.image-swiper .z-extra1-e3:nth-child(1) > div > div:nth-child(2) {
top: 0;
left: 100%;
transform: rotate(-30deg);
transform-origin: 0 0; }
.image-swiper .z-extra1-e3:nth-child(2) > div > div:nth-child(2) {
top: 0;
right: 100%;
transform: rotate(30deg);
transform-origin: 100% 0; }
.image-swiper .z-extra1-e3:nth-child(3) > div > div:nth-child(2) {
bottom: 0.74rem;
right: 50%;
transform: rotate(90deg);
transform-origin: 100% 0; }
.image-swiper .z-extra1-e3:nth-child(3) > div > div:nth-child(1) {
display: none; }
.image-swiper .z-extra1-f1 {
width: 100%;
height: 7.78rem;
background: #f5f5f5;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-f2 {
width: calc(100% - 0.72rem);
position: absolute;
bottom: 0;
right: 0.36rem; }
.image-swiper .z-extra1-f3 {
font-size: 0.3rem;
line-height: 0.48rem;
color: #f5f5f5;
padding: 0 0.14rem;
border: 0;
border-radius: 0.24rem;
background: #4581fb;
position: absolute;
top: 0.4rem;
left: 0.2rem; }
.image-swiper .z-extra1-f3 > div {
width: 100%;
position: absolute;
top: 0.54rem;
left: 0;
height: 0.06rem; }
.image-swiper .z-extra1-f3 > div > img {
width: 1.4rem;
position: absolute;
bottom: 0;
right: -0.06rem; }
.image-swiper .z-extra1-f3 > div > div {
width: 50%;
height: 100%;
border: 0;
border-radius: 0.03rem;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-f4 {
width: calc(100% - 0.48rem);
font-size: 0.28rem;
line-height: 0.54rem;
color: #333333;
position: absolute;
top: 1.18rem;
left: 0.24rem; }
.image-swiper .z-extra1-f5 {
display: none; }
.image-swiper .z-extra1-g1 {
width: 100%;
height: 7.55rem;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-g2 {
width: 10rem;
position: absolute;
top: 2.3rem;
left: calc(50% - 10rem/2); }
.image-swiper .z-extra1-g3 {
font-size: 0.3rem;
line-height: 0.48rem;
color: #f5f5f5;
padding: 0 0.14rem;
border: 0;
border-radius: 0.24rem;
background: #4581fb;
position: absolute;
top: 0.4rem;
left: 0.2rem; }
.image-swiper .z-extra1-g3 > div {
width: 100%;
position: absolute;
top: 0.54rem;
left: 0;
height: 0.06rem; }
.image-swiper .z-extra1-g3 > div > img {
width: 1.4rem;
position: absolute;
bottom: 0;
right: -0.06rem; }
.image-swiper .z-extra1-g3 > div > div {
width: 50%;
height: 100%;
border: 0;
border-radius: 0.03rem;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-g4 {
width: 0.96rem;
position: absolute; }
.image-swiper .z-extra1-g4 div {
font-size: 0.28rem;
line-height: 0.36rem;
color: #fff;
text-align: center;
position: absolute;
top: 0.36rem;
left: calc(50% - 0.3rem);
width: 0.6rem; }
.image-swiper .z-extra1-g4:nth-child(2) div {
top: 0.16rem; }
.image-swiper .z-extra1-g4:nth-child(6) div {
top: 0.16rem; }
.image-swiper .z-extra1-g4:nth-child(1) {
top: 1.88rem;
left: 0.44rem; }
.image-swiper .z-extra1-g4:nth-child(2) {
top: 4.5rem;
left: 0.24rem; }
.image-swiper .z-extra1-g4:nth-child(3) {
top: 1.62rem;
left: calc(50% - 0.46rem); }
.image-swiper .z-extra1-g4:nth-child(4) {
top: 3.92rem;
left: calc(50% - 0.72rem); }
.image-swiper .z-extra1-g4:nth-child(5) {
top: 1.92rem;
right: 0.28rem; }
.image-swiper .z-extra1-g4:nth-child(6) {
top: 5.06rem;
right: 1.16rem; }
.image-swiper .z-extra1-h1 {
width: 100%;
height: 4.76rem;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-h1 > img {
width: 100%;
position: relative; }
.image-swiper .z-extra1-h1 > img:nth-child(1) {
display: none; }
.image-swiper .z-extra1-h1 > img:nth-child(2) {
display: block; }
.image-swiper .z-extra1-h2 {
font-size: 0.3rem;
line-height: 0.48rem;
color: #f5f5f5;
padding: 0 0.14rem;
border: 0;
border-radius: 0.24rem;
background: #4581fb;
position: absolute;
top: 0.4rem;
left: 0.2rem; }
.image-swiper .z-extra1-h2 > div {
width: 100%;
position: absolute;
top: 0.54rem;
left: 0;
height: 0.06rem; }
.image-swiper .z-extra1-h2 > div > img {
width: 1.4rem;
position: absolute;
bottom: 0;
right: -0.06rem; }
.image-swiper .z-extra1-h2 > div > div {
width: 50%;
height: 100%;
border: 0;
border-radius: 0.03rem;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-h3 {
width: 1.5rem;
position: absolute; }
.image-swiper .z-extra1-h3:nth-child(1) {
top: 1.62rem;
left: 0.24rem; }
.image-swiper .z-extra1-h3:nth-child(2) {
top: 2.32rem;
left: 2.08rem; }
.image-swiper .z-extra1-h3:nth-child(3) {
top: 1.92rem;
right: 2.08rem; }
.image-swiper .z-extra1-h3:nth-child(4) {
top: 1.12rem;
right: 0.24rem; }
.image-swiper .z-extra1-h3 img {
margin-bottom: 0.18rem; }
.image-swiper .z-extra1-h3 div {
font-size: 0.24rem;
line-height: 0.28rem;
color: #fff;
width: 100%;
text-align: center; }
.image-swiper .z-extra1-i1 {
width: 100%;
height: 9.64rem;
position: relative;
background: #f5f5f5;
overflow: hidden; }
.image-swiper .z-extra1-i2 {
font-size: 0.3rem;
line-height: 0.48rem;
color: #f5f5f5;
padding: 0 0.14rem;
border: 0;
border-radius: 0.24rem;
background: #4581fb;
position: absolute;
top: 0.4rem;
left: 0.2rem; }
.image-swiper .z-extra1-i2 > div {
width: 100%;
position: absolute;
top: 0.54rem;
left: 0;
height: 0.06rem; }
.image-swiper .z-extra1-i2 > div > img {
width: 1.4rem;
position: absolute;
bottom: 0;
right: -0.06rem; }
.image-swiper .z-extra1-i2 > div > div {
width: 50%;
height: 100%;
border: 0;
border-radius: 0.03rem;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-i3 {
width: calc(100% - 0.48rem);
position: absolute;
top: 1.4rem;
left: 0.24rem; }
.image-swiper .z-extra1-i4 {
width: calc(50% - 0.2rem);
height: 3.72rem;
position: relative;
border: 0;
border-radius: 0.2rem;
overflow: hidden;
background: #fff;
margin-bottom: 0.4rem; }
.image-swiper .z-extra1-i4:nth-child(odd) {
float: left; }
.image-swiper .z-extra1-i4:nth-child(even) {
float: right; }
.image-swiper .z-extra1-i5 {
width: 100%;
height: 1.58rem;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-i6 {
width: 1rem;
height: 1rem;
border: 0;
border-radius: 50%;
background: #fff;
position: absolute;
top: 0.3rem;
left: calc(50% - 0.5rem);
font-size: 0.28rem;
line-height: 1rem;
text-align: center; }
.image-swiper .z-extra1-i4:nth-child(1) .z-extra1-i6 {
color: #2ac6f7; }
.image-swiper .z-extra1-i4:nth-child(2) .z-extra1-i6 {
color: #a47cfe; }
.image-swiper .z-extra1-i4:nth-child(3) .z-extra1-i6 {
color: #f39677; }
.image-swiper .z-extra1-i4:nth-child(4) .z-extra1-i6 {
color: #e25074; }
.image-swiper .z-extra1-i7 {
width: calc(100% - 2*0.4rem);
position: absolute;
top: 1.76rem;
left: 0.4rem;
font-size: 0.24rem;
line-height: 0.42rem;
color: #333333;
text-align: center; }
.image-swiper .z-extra1-j1 {
width: 100%;
height: 9.6rem;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-j1 > img {
width: 100%;
position: relative; }
.image-swiper .z-extra1-j1 > img:nth-child(1) {
display: none; }
.image-swiper .z-extra1-j1 > img:nth-child(2) {
display: block; }
.image-swiper .z-extra1-j2 {
font-size: 0.3rem;
line-height: 0.48rem;
color: #f5f5f5;
padding: 0 0.14rem;
border: 0;
border-radius: 0.24rem;
background: #4581fb;
position: absolute;
top: 0.4rem;
left: 0.2rem; }
.image-swiper .z-extra1-j2 > div {
width: 100%;
position: absolute;
top: 0.54rem;
left: 0;
height: 0.06rem; }
.image-swiper .z-extra1-j2 > div > img {
width: 1.4rem;
position: absolute;
bottom: 0;
right: -0.06rem; }
.image-swiper .z-extra1-j2 > div > div {
width: 50%;
height: 100%;
border: 0;
border-radius: 0.03rem;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-j3 {
width: calc(100% - 0.48rem);
font-size: 0.28rem;
line-height: 0.54rem;
color: #fff;
position: absolute;
top: 1.26rem;
left: 0.24rem; }
.image-swiper .z-extra1-j4 {
display: none; }
.image-swiper .z-extra1-j5 {
width: calc(100% - 0.48rem);
position: absolute;
top: 2.52rem;
right: 0.24rem; }
.image-swiper .z-extra1-j5 > img:nth-child(1) {
display: none; }
.image-swiper .z-extra1-j5 > img:nth-child(2) {
display: block; }
.image-swiper .z-extra1-k1 {
width: 100%;
height: 12.36rem;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-k2 {
font-size: 0.3rem;
line-height: 0.48rem;
color: #f5f5f5;
padding: 0 0.14rem;
border: 0;
border-radius: 0.24rem;
background: #4581fb;
position: absolute;
top: 0.4rem;
left: 0.2rem; }
.image-swiper .z-extra1-k2 > div {
width: 100%;
position: absolute;
top: 0.54rem;
left: 0;
height: 0.06rem; }
.image-swiper .z-extra1-k2 > div > img {
width: 1.4rem;
position: absolute;
bottom: 0;
right: -0.06rem; }
.image-swiper .z-extra1-k2 > div > div {
width: 90%;
height: 100%;
border: 0;
border-radius: 0.03rem;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-k3 {
width: calc(100% - 0.48rem);
position: absolute;
top: 1.4rem;
left: 0.24rem; }
.image-swiper .z-extra1-k4 {
width: calc(50% - 0.1rem);
height: 3.4rem;
border: 0;
border-radius: 0.2rem;
position: relative; }
.image-swiper .z-extra1-k4:nth-child(1) {
float: left;
background: -webkit-linear-gradient(-67deg, #38a0ff, #0173ef);
background: -o-linear-gradient(-67deg, #38a0ff, #0173ef);
background: -moz-linear-gradient(-67deg, #38a0ff, #0173ef);
background: linear-gradient(-67deg, #38a0ff, #0173ef); }
.image-swiper .z-extra1-k4:nth-child(2) {
float: right;
background: -webkit-linear-gradient(-67deg, #9944fc, #7123f3);
background: -o-linear-gradient(-67deg, #9944fc, #7123f3);
background: -moz-linear-gradient(-67deg, #9944fc, #7123f3);
background: linear-gradient(-67deg, #9944fc, #7123f3); }
.image-swiper .z-extra1-k4 > div:nth-child(1) {
font-size: 0.32rem;
line-height: 0.32rem;
color: #fff;
text-align: center;
position: absolute;
top: 0.28rem;
left: 0;
width: 100%; }
.image-swiper .z-extra1-k4 > div:nth-child(2) {
font-size: 0.24rem;
line-height: 0.24rem;
color: #fff;
text-align: center;
position: absolute;
top: 0.76rem;
left: 0;
width: 100%; }
.image-swiper .z-extra1-k4 > div:nth-child(3) {
width: 1rem;
height: 1px;
position: absolute;
top: 1.32rem;
left: calc(50% - 0.5rem);
background: #fff; }
.image-swiper .z-extra1-k4 > div:nth-child(4) {
font-size: 0.24rem;
line-height: 0.38rem;
color: #fff;
text-align: center;
position: absolute;
top: 1.6rem;
left: 0.2rem;
width: calc(100% - 0.4rem); }
.image-swiper .z-extra1-k5 {
width: 3.72rem;
height: 3.72rem;
position: absolute;
top: 7rem;
right: calc(50% - 3.72rem/2);
border: 2px solid #596aff;
border-radius: 50%;
box-sizing: border-box; }
.image-swiper .z-extra1-k6 {
width: 100%;
font-size: 0.28rem;
line-height: 0.28rem;
color: #333333;
text-align: center;
position: absolute;
top: calc(50% - 0.28rem/2);
left: 0; }
.image-swiper .z-extra1-k7 {
width: 2.5rem;
height: 2.5rem;
border: 0;
border-radius: 50%;
overflow: hidden;
position: absolute; }
.image-swiper .z-extra1-k7:nth-child(1) {
top: -0.25rem;
left: -1.66rem; }
.image-swiper .z-extra1-k7:nth-child(2) {
top: 2.44rem;
left: -0.96rem; }
.image-swiper .z-extra1-k7:nth-child(3) {
top: 2.44rem;
right: -0.96rem; }
.image-swiper .z-extra1-k7:nth-child(4) {
top: -0.25rem;
right: -1.66rem; }
.image-swiper .z-extra1-k7:nth-child(5) {
top: -1.86rem;
left: calc(50% - 2.5rem/2); }
.image-swiper .z-extra1-k7 img {
width: 100%;
height: 100%; }
.image-swiper .z-extra1-k7 div {
width: 100%;
height: 0.7rem;
position: absolute;
bottom: 0;
left: 0;
background: rgba(86, 103, 255, 0.7);
font-size: 0.24rem;
line-height: 0.7rem;
color: #fff;
text-align: center; }
.image-swiper .z-extra1-m1 {
width: 100%;
height: 10.7rem;
position: relative;
background: #f5f5f5;
overflow: hidden; }
.image-swiper .z-extra1-m2 {
font-size: 0.3rem;
line-height: 0.48rem;
color: #f5f5f5;
padding: 0 0.14rem;
border: 0;
border-radius: 0.24rem;
background: #4581fb;
position: absolute;
top: 0.4rem;
left: 0.2rem; }
.image-swiper .z-extra1-m2 > div {
width: 100%;
position: absolute;
top: 0.54rem;
left: 0;
height: 0.06rem; }
.image-swiper .z-extra1-m2 > div > img {
width: 1.4rem;
position: absolute;
bottom: 0;
right: -0.06rem; }
.image-swiper .z-extra1-m2 > div > div {
width: 50%;
height: 100%;
border: 0;
border-radius: 0.03rem;
background: #4581fb;
position: absolute;
top: 0;
left: 0; }
.image-swiper .z-extra1-m3 {
width: calc(100% - 0.48rem);
position: absolute;
top: 1.4rem;
left: 0.24rem; }
.image-swiper .z-extra1-m4 {
width: calc(50% - 0.1rem);
height: 4.18rem;
background: #fff;
border-radius: 0.2rem;
border: 0;
overflow: hidden;
position: relative;
margin-bottom: 0.2rem; }
.image-swiper .z-extra1-m4:nth-child(odd) {
float: left; }
.image-swiper .z-extra1-m4:nth-child(even) {
float: right; }
.image-swiper .z-extra1-m5 {
width: 1.2rem;
height: 1.2rem;
border: 0;
border-radius: 50%;
position: absolute;
top: 0.4rem;
left: calc(50% - 1.2rem/2);
overflow: hidden; }
.image-swiper .z-extra1-m5 img {
width: 100%;
height: 100%; }
.image-swiper .z-extra1-m6 {
width: 100%;
font-size: 0.28rem;
line-height: 0.28rem;
color: #000000;
text-align: center;
position: absolute;
top: 1.9rem;
left: 0; }
.image-swiper .z-extra1-m7 {
width: calc(100% - 0.18rem*2);
font-size: 0.24rem;
line-height: 0.38rem;
color: #000000;
text-align: center;
position: absolute;
top: 2.32rem;
left: 0.18rem; }
.image-swiper .z-extra1-n1 {
width: 100%;
position: relative;
overflow: hidden; }
.image-swiper .z-extra1-n1 > img {
width: 100%;
position: relative; }
.image-swiper .z-extra1-n1 > img:nth-child(1) {
display: none; }
.image-swiper .z-extra1-n1 > img:nth-child(2) {
display: block; }
.image-swiper .z-extra1-n2 {
width: 3.56rem;
position: absolute;
top: 0.36rem;
right: 0.3rem; }
.image-swiper .z-extra1-n3 {
font-size: 0.36rem;
line-height: 0.6rem;
color: #fff;
position: absolute;
top: 0.3rem;
left: 0.24rem;
width: 3.46rem; } }